AppShell
Application layout with sidebar, header, and content areas.
Installation
tsx
npx smi-ui add app-shellPreview
Welcome!
Dashboard
Main content area
Usage
tsx
import { AppShell } from "@/components/blocks/app-shell"
export function Layout() {
return (
<AppShell
sidebar={<Sidebar />}
header={<Header />}
sidebarWidth="md"
>
{children}
</AppShell>
)
}Props
| Prop | Type | Default |
|---|---|---|
| sidebar | ReactNode | - |
| header | ReactNode | - |
| sidebarWidth | sm | md | lg | md |