Components / Application

Sidebar

The Instant Strata application sidebar, built on the shadcn sidebar primitives and composed from three branded pieces: a workspace switcher header, searchable navigation with optional drill-in panels, and a user-menu footer. Collapses to an icon rail and becomes a slide-in sheet on mobile. See App Layout for the full shell.

Preview

Installation

bash

npx shadcn add https://raw.githubusercontent.com/levi-putna/elements/main/registry/app-shell/registry.json

Navigation: SidebarNav

Renders labelled groups of menu items. Each item takes an icon and href; supply an items array to turn it into collapsible sub-navigation, or a panel to drill into a second-tier stacked view (e.g. Settings). Search is on by default: click the field at the top of the nav or press ⌘K.

tsx

import { SidebarNav, type NavGroup } from "@/components/ui/app-shell"
import {
  LayoutDashboard,
  MessageSquare,
  Settings,
  SlidersHorizontal,
  Users,
} from "lucide-react"

const groups: NavGroup[] = [
  {
    items: [
      { title: "Dashboard", href: "/", icon: LayoutDashboard, isActive: true },
      { title: "Inbox", href: "/inbox", icon: MessageSquare },
      {
        title: "Settings",
        href: "/settings",
        icon: Settings,
        panel: {
          title: "Settings",
          groups: [
            {
              label: "Workspace",
              items: [
                { title: "General", href: "/settings", icon: SlidersHorizontal },
                { title: "Members", href: "/settings/members", icon: Users },
              ],
            },
          ],
        },
      },
    ],
  },
]

<SidebarContent className="overflow-hidden">
  <SidebarNav groups={groups} searchPlaceholder="Search…" />
</SidebarContent>

Prop	Type	Default	Description
groups	NavGroup[]	-	Labelled groups of nav items. NavItem = { title, href, icon?, isActive?, items?, panel? }. An items array makes the entry collapsible; a panel drills into a stacked second tier.
search	boolean	true	Show the sidebar search overlay. Opens via the search field or ⌘K.
searchPlaceholder	string	-	Placeholder copy for the search input.
searchExtras	NavSearchResult[]	-	Extra searchable entity rows (schemes, lots, owners, documents) not shown in the main nav.
className	string	-	Additional classes applied to each SidebarGroup.

Header: AppSidebarHeader

The workspace switcher. Drop it in the SidebarHeader slot.

tsx

import { AppSidebarHeader } from "@/components/ui/app-shell"

// Sits in the SidebarHeader slot: the primary LogoMark + workspace
// name, with a dropdown to switch workspaces.
<AppSidebarHeader
  workspace={{ name: "Instant Strata", plan: "Pro plan" }}
  workspaces={[
    { name: "Instant Strata", plan: "Pro plan" },
    { name: "Harbour Body Corp", plan: "Free plan" },
  ]}
  onSelect={(w) => switchWorkspace(w)}
/>

Prop	Type	Default	Description
workspace	{ name, plan? }	-	The active workspace shown in the header.
workspaces	Workspace[]	-	Optional list of workspaces shown in the switcher dropdown.
onSelect	(workspace) => void	-	Called when a workspace is chosen from the dropdown.

Footer: AppSidebarFooter

The user menu. Drop it in the SidebarFooter slot.

tsx

import { AppSidebarFooter } from "@/components/ui/app-shell"

// Sits in the SidebarFooter slot: avatar initials + name/email,
// opening an account dropdown (upgrade, settings, support, sign out).
<AppSidebarFooter
  user={{ name: "Levi Putna", email: "levi@instantstrata.com" }}
  supportHref="/support"
  onSignOut={() => signOut()}
/>

Prop	Type	Default	Description
user	{ name, email, avatar? }	-	The signed-in user. Falls back to initials when no avatar URL is given.
supportHref	string	"#"	Href for the Support item in the account dropdown.
onSignOut	() => void	-	Called when the user selects Sign out.