Krakstack Registry

Overview

sidebar-layout provides a sidebar-based layout for applications using TanStack Router. It includes a configurable sidebar with an optional header slot and navigation groups, a page header component with optional badge, description, and actions, and an optional top-bar action slot. Apps own product-specific controls such as organization switchers, locale switchers, and user buttons by passing them to headerActions.

Features

Configurable sidebar with sidebarHeader slot and grouped navigation
Active link detection via TanStack Router
Collapsible icon sidebar with SidebarProvider
SidebarPageHeader with optional badge, description, and actions
Optional headerActions slot for app-owned top-bar controls
Uses Outlet or children for content rendering

Usage

tsx

import { SidebarLayout, SidebarPageHeader, type NavGroup } from "@/components/ui/sidebar-layout";
import { AppBrand } from "@/components/ui/app-brand";
import { LocaleSwitcher } from "@/components/ui/locale-switcher";
import { LayoutDashboard, Users, Blocks } from "lucide-react";

const groups: NavGroup[] = [
  {
    label: () => "Navigation",
    items: [
      { label: () => "Dashboard", href: "/admin", icon: LayoutDashboard },
      { label: () => "Users", href: "/admin/users", icon: Users },
    ],
  },
];

<SidebarLayout
  sidebarHeader={
    <AppBrand
      label="My App"
      subtitle="Admin Panel"
      icon={Blocks}
      variant="sidebar"
      href="/admin"
    />
  }
  headerActions={
    <>
      <YourSearch />
      <LocaleSwitcher />
    </>
  }
  groups={groups}
/>

For pages with custom content:

tsx

<SidebarLayout
  sidebarHeader={<AppBrand label="My App" subtitle="Admin Panel" icon={Blocks} variant="sidebar" href="/admin" />}
  groups={groups}
>
  <SidebarPageHeader title="Users" description="Manage users" />
</SidebarLayout>

Sidebar Layout

Overview

Features

Usage

Dependencies

Registry Dependencies