@brkz-inc/ui

Reusable UI components for the BRKZ design system. Built on shadcn/ui and Radix UI primitives.

Key principles

• Every component uses semantic tokens only, never hardcoded colors, spacing, or radius
• Built on Radix UI primitives for accessibility out of the box
• Fully typed with TypeScript strict mode
• Variants via class-variance-authority

Component Status

Each folder under src/components/ is one shipped module; the live Storybook is the current catalog. The package's exports map declares a single entrypoint, the barrel, so import named exports from @brkz-inc/ui (e.g. import { Button } from '@brkz-inc/ui'); there are no per-component subpath entrypoints. (Page-shell compositions like DetailPageShell / ListingPageShell / AuthLayout live in @brkz-inc/patterns, not here; the Sidebar primitive ships here and is composed into a per-app AppSidebar by the consumer.)

Names below are module/family labels, exact exported symbols can differ (the Logo module exports BrkzLogo / BrkzSymbol, Radio exports RadioGroup / RadioGroupItem, Chart exports ChartContainer / ChartTooltip / …). Check dist/index.d.ts for exact names.

Core Primitives ✅

| Component | Status | |-----------|--------| | Button | ✅ Done | | IconButton | ✅ Done | | LinkButton | ✅ Done | | LoadingButton | ✅ Done | | Badge | ✅ Done | | Spinner | ✅ Done | | Avatar | ✅ Done | | Skeleton | ✅ Done | | Separator | ✅ Done | | Label | ✅ Done | | Kbd | ✅ Done | | Logo | ✅ Done | | Typography | ✅ Done |

Form Controls ✅

Input, Textarea, Checkbox, Radio, Switch, Select, Combobox, MultiSelect, InputOTP, InputFile, PhoneInput, SearchInput, Slider, Stepper, Field, Form, Toggle

Overlays & Navigation ✅

Dialog, AlertDialog, Sheet, Drawer, Popover, Tooltip, HoverCard, Command, DropdownMenu, ContextMenu, Menubar, NavigationMenu, Breadcrumb, Tabs, StatusFilterTabs, Accordion, Collapsible, Sidebar

Data & Feedback ✅

Table, DataTable, Pagination, CursorPagination, Card, Alert, Sonner, Toast, Progress, ScrollArea, Resizable, Carousel, Calendar, Chart, Timeline

Utility ✅

AspectRatio, Item, Empty, ButtonGroup

Usage

import { Button, LoadingButton, Badge, Spinner, Avatar, AvatarImage, AvatarFallback } from '@brkz-inc/ui'

// Button
<Button variant="default" size="md">Submit</Button>
<Button variant="outline" size="lg">Cancel</Button>

// LoadingButton — Button renders no spinner, use this for async actions
<LoadingButton variant="destructive" loading={isDeleting}>Delete</LoadingButton>

// Badge
<Badge variant="success">Active</Badge>
<Badge variant="error">Failed</Badge>

// Spinner
<Spinner size="md" />

// Avatar
<Avatar>
  <AvatarImage src={user.avatar} alt={user.name} />
  <AvatarFallback>JS</AvatarFallback>
</Avatar>

Token rule

// ❌ NEVER
<div className="bg-blue-500 text-white rounded-[8px]" />

// ✅ ALWAYS
<div className="bg-primary text-primary-foreground rounded-md" />