AppShell

Application layout with sidebar, header, and content areas.

Installation

bash

npx @smicolon/cli add app-shell

Run init once per project before adding components. See Installation.

Preview

Welcome back, Layla

Dashboard

You have 12 new orders today.

Props

Prop	Type	Default	Description
`sidebar`	`ReactNode`	—	Sidebar content, hidden on mobile.
`header`	`ReactNode`	—	Header content.
`children`	`ReactNode`	—	Main content.
`sidebarWidth`	`"sm" \| "md" \| "lg"`	`"md"`	Width of the sidebar.
`sidebarMobile`	`boolean`	`false`	Shows the sidebar on mobile.
`className`	`string`	—	Extra classes for the component.

Usage

tsx

import { AppShell } from "@/components/blocks/app-shell"

export function Layout() {
  return (
    <AppShell
      sidebar={<Sidebar />}
      header={<Header />}
      sidebarWidth="md"
    >
      {children}
    </AppShell>
  )
}