Layout | Arbol UI

App shell: The frame every dashboard page shares: a skip link, a sidebar that folds into an icon rail from lg and becomes a drawer on phones, a header for breadcrumbs and actions, and the page in a scrolling main landmark.
Card: A bordered surface that groups one subject: a summary, a settings group, a chart. Compose it from a header (title, description, action), content and a footer; leave out any part.
Disclosure: A section that folds away, with a hint of what is inside while closed. Use it for the optional part of a form or advanced settings; stack several in a DisclosureGroup for an accordion. Leave out the title to draw your own trigger.
Page: The frame of every screen: a centered column, a header with the title, what the page is for and its actions, and the content below. Use DetailHeader for the page of one record.
Save bar: The foot of a page form: Save, Discard and what is pending, floating above the bottom of the page while something is unsaved. A clean form shows no bar, only what the last save did.
Section header: Names a section of a page: SectionHeader for a titled section with its one action, SectionEyebrow for the quiet uppercase name of a panel.
Separator: A hairline between two groups of content: sections of a card, or groups of buttons in a toolbar. A vertical separator stretches to the height of its row.
Settings: Settings pages: SettingGroup frames related settings as one card, SettingRow pairs a setting’s name and explanation with its control, and SettingToggle is an on/off setting whose whole row toggles.
TanStack Router: The router entry: RouterUIProvider routes every href the components render through TanStack Router, and useUnsavedChangesBlocker asks before a page with a draft is left. Each example runs its own router in memory.