Sidebar

Sidebar is the first entry in crisp's Product layer — components built by composing the primitives (Button, Badge, Avatar, Kbd, NavItem) into real app-shell pieces, rather than being primitives themselves. It's an active work in progress.

Measured from Attio's live left rail: 275px fixed width, workspace switcher, ⌘K search, and collapsible Records / Lists / Chats sections.

Preview

Installation

bun add crisp

import "crisp/styles.css";
import { Sidebar } from "crisp";

Usage

import { Sidebar } from "crisp";

export function AppShell({ children }: { children: React.ReactNode }) {
  return (
    <div style={{ display: "flex" }}>
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}

Props

Sidebar currently takes no variant props — its content (workspace name, nav items, record types) is hard-coded to match the measured Attio reference while the Product layer is being built out. Configurable content (via children/props) is expected in a follow-up pass.

Composition

Sidebar is built entirely from other crisp components, dogfooding the library:

• Avatar — the workspace tile (shape="rounded" tone="cyan") and each record type's colored glyph tile.
• Button — the collapse-panel icon button, the inbox icon button, and the "Getting started 1/6" pill.
• Badge — the "1" count next to the active Tasks item (variant="solid" size="small").
• NavItem (Product) — every row in the main nav, record list, and chats section.
• Kbd — the ⌘K search shortcut hint.

Accessibility

The workspace switcher, search field, inbox button, and every nav row are focusable and reachable by keyboard. Collapsible sections (Records, Lists, Chats) are real <button> elements with aria-expanded, so their state is announced to screen readers. Icon-only buttons (collapse panel, inbox) carry aria-label.