---
title: "Layout"
description: "The layout components of @arbol-ai/ui: App shell, Card, Disclosure, Page, Save bar, Section header, Separator, Settings, TanStack Router."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Layout

- [App shell](https://epidermis.getarbol.com/components/layout/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](https://epidermis.getarbol.com/components/layout/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](https://epidermis.getarbol.com/components/layout/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](https://epidermis.getarbol.com/components/layout/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](https://epidermis.getarbol.com/components/layout/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](https://epidermis.getarbol.com/components/layout/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](https://epidermis.getarbol.com/components/layout/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](https://epidermis.getarbol.com/components/layout/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](https://epidermis.getarbol.com/components/layout/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.

Source: https://epidermis.getarbol.com/components/layout/index.mdx