App Shell
A composable application shell layout coordinating Sidebar, Header, Main content, and Footer areas with synchronized entry animations and fixed/floating variants.
Installation
$ npx shadcn@latest add @orecus/app-shellDependencies:
motion
Registry:
@orecus/sidebar@orecus/color-utils
Component
JD
Main Content Area
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | Main layout content (AppShell.TopBar, AppShell.Sidebar, AppShell.Header, AppShell.Main, AppShell.Footer) |
variant | 'sidebar-inline' | 'sidebar-floating' | 'sidebar-inline' | Layout variant - inline keeps sidebar in document flow, floating adds visual separation |
sidebarType | 'normal' | 'subtle' | 'strong' | 'solid' | 'none' | 'solid' | Glass type for sidebar and TopBar styling |
sidebarInvert | boolean | false | Invert sidebar and TopBar glass styling |
className | string | — | Additional CSS classes for the root container |
Compound Components
AppShell.TopBar
Thin bar at top of content area with floating children container. Creates inverted corner effect at sidebar junction.
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | TopBar content (typically action buttons, user avatar) |
height | number | 6 | Height of the thin connecting line in pixels |
radius | 'sm' | 'md' | 'lg' | 'xl' | 'lg' | Border radius size for the inverted corner |
className | string | — | Additional CSS classes |
AppShell.Sidebar
Wrapper for the Sidebar component. Handles responsive visibility and layout positioning.
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | The Sidebar component instance |
className | string | — | Additional CSS classes |
AppShell.Header
Sticky or static header area with entry animation.
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | Header content |
sticky | boolean | true | Whether the header is sticky |
className | string | — | Additional CSS classes |
AppShell.Main
Main content area with entry animation.
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | Main area content |
className | string | — | Additional CSS classes |
AppShell.Footer
Sticky or static footer area with entry animation.
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | Footer content |
sticky | boolean | false | Whether the footer is sticky |
className | string | — | Additional CSS classes |