Preview scale
Each variant uses 90% of the preview panel width and 90% of the browser height (90vh) so the sidebar column, scroll regions, and footer slot match a real dashboard viewport.
atelier — in App Shell
Songs
Sidebar keeps full column height; main scrolls independently.
Page content — same proportions as Lyriq-style dashboards.
Default (groups, fade dividers, footer CTA)
Size: sm / md / lg
Each size sets shell padding (p-4 / p-6) and internal brand, group, and footer spacing.
size=smsize=mdsize=lg
Nav only (no footer)
Footer: solid divider variant
Long nav (scrollable middle)
Section fade divider (inset)
Uses Divider variant=fade inset — same hairline as sidebar group breaks.
Group labels and nav items keep shell padding (p-6 on md).
API
| Prop | Required | Type | Default | Description |
|---|---|---|---|---|
| theme | Optional | SiteTheme | atelier | Visual theme. |
| size | Optional | "sm" | "md" | "lg" | md | Width and shell padding (sm p-4, md/lg p-6) plus brand/footer/group spacing. |
| brand | Optional | ReactNode | — | Use SidebarBrand for product name links. |
| footer | Optional | ReactNode | — | Bottom slot — NavItem, Button, etc. |
| footerDividerVariant | Optional | DividerVariant | fade | Divider above footer. |
| SidebarBrand | Optional | component | — | Registry Link styled as product chrome. |
| SidebarGroup | Optional | component | — | Labeled section; dividerBefore adds fade inset rule. |