Workspace dashboard

Full app shell — 232px sidebar (sections, badges, credits widget, user footer) + sticky topbar (breadcrumbs + search + actions) + page header + 4 KPI cards + tabs + table with Owner column.

Preview

// Compose using BR primitives:
import { Avatar, Badge, Button, Breadcrumbs, Table } from "@/components/br/primitives";
import { Plus, Filter, Download } from "@/components/br/icons";

<div className="artboard">
  <div className="artboard-chrome">
    <div className="lights"><i /><i /><i /></div>
    <div className="url">atelier.brych.studio / clients</div>
  </div>
  <div className="dash-frame">
    {/* SIDEBAR */}
    <aside className="dash-sidebar">
      <div className="dash-sidebar-brand">Atelier</div>
      <div className="dash-sidebar-section">Workspace</div>
      <button className="dash-sb-item active">Clients <Badge>6</Badge></button>
      {/* more items */}
      <div className="dash-credits">
        {/* credits widget */}
      </div>
      <div className="dash-sb-foot">
        <Avatar accent fallback="BR" size="sm" />
        Bartosz R.
      </div>
    </aside>

    {/* MAIN */}
    <div className="dash-main">
      <header className="dash-topbar">
        <Breadcrumbs items={[{ label: "Studio" }, { label: "Clients" }]} />
        <div className="dash-topbar-search">Search clients ⌘K</div>
      </header>
      <div className="dash-body">
        <div className="dash-header">
          <h1>Clients</h1>
          <Button variant="primary" icon={<Plus size={13} />}>New client</Button>
        </div>
        <div className="dash-kpis">
          {/* 4 KPI cards */}
        </div>
        <div className="dash-table-wrap">
          <div className="dash-tabs">
            {/* All / Active / Paused / Trial */}
          </div>
          <Table columns={...} rows={...} />
        </div>
      </div>
    </div>
  </div>
</div>