VVibeFlui

Layout

Layout describes how VibeFlui arranges resource pages, forms, tables, dashboards, detail views, modals, drawers, tabs, wizards, grids, and nested resources.

VibeFlui layout is schema-driven, but it is intentionally split across several schema areas:

  • layout controls high-level form tab/wizard behavior and multi-resource stacking.
  • form.mode, form.grid, form.groups, and form.sections control form arrangement.
  • detail.mode and detail.grid control detail arrangement.
  • dashboard.grid controls dashboard card arrangement.
  • resources[] controls multi-resource pages.
  • theme.classNames controls root, layout, toolbar, modal, drawer, page, and field/table slots.

Basic layout schema

TS
export const usersSchema = {
  resource: "users",
  title: "Users",
  description: "Manage user accounts.",
  layout: {
    type: "tabs",
    tabs: [
      { key: "profile", title: "Profile", fields: ["name", "email"] },
      { key: "access", title: "Access", fields: ["roleId", "status"] }
    ]
  },
  form: {
    mode: "modal",
    width: "3xl",
    grid: {
      columns: {
        base: 1,
        md: 2
      },
      gap: "gap-4"
    },
    fields: ["name", "email", "roleId", "status"]
  }
} as const;

Layout types

layout.typeRuntime effect
tabsForm renders tabbed fields when layout.tabs exists. Multi-resource pages render resource tabs.
wizardForm renders stepper-style wizard fields from layout.steps. Multi-resource pages still render resource tabs.
sectionsMulti-resource pages stack child resources as sections.
pageMulti-resource pages stack child resources; form/detail page modes render page-like surfaces.

Subpages