App Shell 2

Installation

Usage

import {
  AppShell2,
  AppShell2PageHeader,
  AppShell2Search,
} from '@/components/odysseyui/app-shell-2';
import { SidebarProvider, SidebarInset } from '@/components/ui/sidebar';

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <SidebarProvider>
      <AppShell2 user={{ name: 'Jane Smith', email: 'jane@acme.com' }} />
      <SidebarInset>
        <AppShell2PageHeader
          pageName="Dashboard"
          breadcrumbs={[
            { label: 'Platform', href: '/playground' },
            { label: 'Dashboard' },
          ]}
          user={{ name: 'Jane Smith', email: 'jane@acme.com' }}
        />
        {children}
      </SidebarInset>
    </SidebarProvider>
  );
}

How It Works

• Uses shadcn Sidebar with collapsible="icon" and variant="floating" so the panel floats above the page content rather than pushing it.
• A lightweight custom search palette (no external cmdk dependency) opens via ⌘ K (or click), filtering sidebar nav items in real time with fuzzy keyword matching inside a Dialog.
• AppShell2PageHeader renders a breadcrumb trail with a SidebarTrigger, vertical separator, and an avatar dropdown menu for profile actions.
• A keyboard shortcuts modal is accessible from the user dropdown, listing all available shortcuts with styled Kbd badges.
• Sidebar sections support optional collapsing via the collapsibleSubsections prop, animated with a CSS grid-template-rows trick for smooth height transitions.
• Scroll fading masks (bg-linear-to-b / bg-linear-to-t) are layered above and below the nav content to hint at overflowable content.
• The user footer uses OdysseyAvatar as a fallback when no avatar image is available, deterministically picking a color from the user's name.

API Reference

AppShell2

AppShell2PageHeader

AppShell2Config