Multi-Resource Layout

Use resources[] to compose multiple resource schemas under one parent schema.

Tabbed resources

When resources[] exists and layout.type is not "sections" or "page", VibeFlui renders child resources as tabs.

export const adminSchema = {
  resource: "admin",
  title: "Admin Workspace",
  layout: {
    type: "tabs"
  },
  resources: [
    {
      resource: "roles",
      title: "Roles",
      table: {
        columns: ["name", "description"]
      }
    },
    {
      resource: "permissions",
      title: "Permissions",
      mode: "readonly",
      table: {
        columns: ["key", "label", "group"]
      }
    }
  ]
} as const;

The tab labels come from each child resource's title, then resource, then Resource {index}.

Stacked resources

Use layout.type: "sections" or layout.type: "page" to stack child resources.

export const adminSchema = {
  resource: "admin",
  title: "Admin Workspace",
  layout: {
    type: "sections"
  },
  resources: [
    { resource: "roles", title: "Roles", table: { columns: ["name"] } },
    { resource: "permissions", title: "Permissions", table: { columns: ["key"] } }
  ]
} as const;

Each child resource renders in its own section. The child resource is rendered by a nested <FluiKit schema={child} />.

Important runtime note

For multi-resource layout, VibeFlui currently uses resources[] to build tabs. layout.tabs metadata is used by form tabs, not by child-resource tab labels.