AppShell

Application layout with sidebar, header, and content areas.

Installation

tsx
npx smi-ui add app-shell

Preview

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

PropTypeDefault
sidebarReactNode-
headerReactNode-
sidebarWidthsm | md | lgmd