Patterns

Sidebar

240px glass column. Sections + items + badges + active-state accent rule. Optional shortcut hints reveal 1-9 while Cmd/Ctrl is held, then arm bare number selection for a brief moment.

installnpx shadcn@latest add https://ds.bartoszrychlicki.com/r/br-primitives.json

Preview

BRBR Atelier · Ed. 01

Created with passion.

A small atelier for product systems.

Active item

2px accent rule on left edge + icon tinted accent + surface-3 background.

Brand foot

Drop BrandCard in any sidebar; flex-direction column + margin-top: auto pins it to the bottom.

import { Sidebar } from "@/components/br/primitives";
import { BrandCard } from "@/components/br/brand-card";
import { Home, Users } from "@/components/br/icons";

<div style={{ display: "flex", flexDirection: "column", height: "100vh" }}>
  <Sidebar shortcutHints sections={[
    { items: [
        { icon: <Home size={14} />, label: "Dashboard", active: true },
        { icon: <Users size={14} />, label: "Clients", onClick: openClients },
    ]},
    { label: "Workspace", items: [...] },
  ]} />
  <div style={{ marginTop: "auto" }}>
    <BrandCard />
  </div>
</div>

Props

Prop	Type	Default	Description
sections	SidebarSection[]	—	Grouped items: { label?, items: SidebarItem[] }.
SidebarItem.icon/label/active/badge/onClick	ReactNode / boolean / fn	—	Per-item shape.
shortcutHints	boolean	false	Shows 1-9 hints while Cmd/Ctrl is held, then lets bare number keys activate visible items.
shortcutHintDelay	number	700	Milliseconds the number shortcuts stay armed after releasing Cmd/Ctrl.