Patterns

Sidebar

240px glass column. Sections + items + badges + active-state accent rule. BrandCard pinned at the bottom via flex margin-top: auto.

installnpx shadcn@latest add https://br-design-system2.vercel.app/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 sections={[
    { items: [
        { icon: <Home size={14} />, label: "Dashboard", active: true },
        { icon: <Users size={14} />, label: "Clients" },
    ]},
    { 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.