AppShell

Application layout with sidebar, header, and content areas.

Installation

bash

npx @smicolon/fasla-ui@latest 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 type { ReactNode } from "react"
import { AppShell } from "@/components/blocks/app-shell"

const nav = [
  { label: "Dashboard", href: "/dashboard" },
  { label: "Orders", href: "/orders" },
  { label: "Settings", href: "/settings" },
]

export function AppLayout({ children }: { children: ReactNode }) {
  return (
    <AppShell
      sidebarWidth="md"
      sidebar={
        <div className="flex h-full flex-col">
          <div className="flex h-14 items-center border-b px-4">
            <span className="font-semibold">My store</span>
          </div>
          <nav className="flex-1 space-y-1 p-2">
            {nav.map((item) => (
              <a key={item.href} href={item.href} className="flex rounded-md px-3 py-2 text-sm hover:bg-accent">
                {item.label}
              </a>
            ))}
          </nav>
        </div>
      }
      header={
        <div className="flex h-14 items-center px-4">
          <span className="text-sm text-muted-foreground">Welcome back, Layla</span>
        </div>
      }
    >
      {children}
    </AppShell>
  )
}