Workspace sidebar

App sidebar with collapsible nested teams.

Usage

import { AppSidebar } from '@/components/blocks/sidebar-01'


<div className="flex h-screen flex-col md:flex-row">
  <AppSidebar />
  <main className="flex-1">…</main>
</div>


// Your own workspace, navigation and teams, with routing in your hands
<AppSidebar
  workspace={{ name: 'Spruce', logo: <SpruceLogo /> }}
  user={{ name: 'Sam Lee', avatar: '/avatars/sam.jpg' }}
  navItems={[
    { id: 'inbox', label: 'Inbox', icon: <InboxIcon />, badge: 4, badgeLabel: '4 unread' },
    { id: 'messages', label: 'Messages', icon: <ChatIcon /> },
  ]}
  teams={{
    label: 'Teams',
    groups: [
      {
        id: 'design',
        name: 'Design',
        color: 'oklch(62.6% 0.205 254.947)',
        children: [{ id: 'brand', name: 'Brand', color: 'oklch(72% 0 0)' }],
      },
    ],
  }}
  upgrade={{ title: 'Trial ends Friday', body: 'Keep your history and seats.', href: '/billing' }}
  activeId={pathname}
  onNavigate={(id) => navigate(id)}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/sidebar-01

npx shadcn@latest add @pastaui-pro/sidebar-01

yarn dlx shadcn@latest add @pastaui-pro/sidebar-01

bunx --bun shadcn@latest add @pastaui-pro/sidebar-01

Source

Props

Workspace sidebar props
Prop	Type	Default	Description
workspace	SidebarWorkspace	= Kittiwake	Workspace name, logo and optional switcher menu links ({ label, href }[]) shown at the top.
user	SidebarUser	= { name: 'Orla Quennell' }	Signed-in user. Shows the avatar image when given, otherwise their initials.
navItems	SidebarNavItem[]	= Inbox and Messages	Main links, each with an id, label, icon, optional href, badge count and badgeLabel read by screen readers.
teams	SidebarTeams \| null	= Harbourlane and three teams	Section label and collapsible groups. Each group and child has an id, name, marker colour and optional href. Pass null to hide.
upgrade	SidebarUpgrade \| null	= Seats card	Upgrade card title, body, ctaLabel and href. Pass null to hide.
footerLinks	SidebarFooterLink[]	= Got feedback? and Support	Links under the upgrade card, each with an id, label, href and icon.
activeId	string	= —	Controlled id of the active nav item or team.
defaultActiveId	string	= 'messages'	Active item on first render when uncontrolled.
onNavigate	(id: string) => void	= —	Called when a nav item or team is chosen.
defaultTeamsOpen	boolean	= true	Whether the team groups start expanded.
label	string	= 'Primary'	Accessible name for the navigation landmark and mobile sheet.
className	string	= —	Additional classes for the root.
style	CSSProperties	= —	Inline styles, handy for overriding the --pp-* theme variables.