Root Layout

The root FluiKit layout renders the resource title, description, toolbar actions, feedback, dashboard, table, and active form/detail surfaces.

Render order

For a normal single-resource schema, VibeFlui renders:

1. Root container with theme.classNames.root.
2. Header and toolbar row with theme.classNames.layout.
3. Title and description.
4. Toolbar actions.
5. Feedback.
6. Dashboard, when configured and no page form/detail surface is active.
7. Table, when no page form/detail surface is active.
8. Modal, drawer, page, or inline form/detail surface.

Example

export const usersSchema = {
  resource: "users",
  title: "Users",
  description: "Manage user accounts and access.",
  actions: {
    toolbar: [
      {
        key: "export",
        label: "Export",
        icon: "lucide:download",
        handler: "users.export"
      }
    ]
  },
  table: {
    columns: ["name", "email", "status"]
  }
} as const;

Theme slots

theme: {
  classNames: {
    root: "space-y-4",
    layout: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between",
    toolbar: "flex flex-wrap items-center gap-2"
  }
}

layout.className

layout.className is a second, schema-level way to add classes to the same header/toolbar row container as the layout theme slot above — merged alongside theme.classNames.layout, not replacing it. It applies regardless of layout.type, even for a plain single-resource schema with no resources[], layout.sections, or layout.tabs.

layout: {
  className: "border-b pb-4"
}

Use theme.classNames.layout for a reusable preset-level class; use layout.className for a one-off, per-schema class hook.

Page surface behavior

When a form or detail view uses mode: "page", the table and dashboard are hidden while the page surface is active.

This lets a page form or page detail view become the primary task surface.