Components

This site documents Blackwork-specific APIs in detail: layouts, widgets, theme, forms, and the components that add behavior on top of the primitives.

Each documented page has a live preview, the matching code, and an API table.

Documented

Layouts Widgets Theme Button Dialog Field Form Sheet

Other components

The rest of the UI components follow the composition and visual baseline of shadcn/ui, but Blackwork 0.12 uses Base UI for interactive primitives. Import components from blackwork and treat Blackwork's TypeScript types as the API contract. Do not assume a Radix UI example is drop-in compatible.

Server components

Alert, Badge, Card, Empty, Field, and Input are also available from blackwork/rsc.

Accordion Alert Alert Dialog Aspect Ratio Avatar Badge Breadcrumb Button Group Card Checkbox Collapsible Combobox Dropdown Menu Empty Hover Card Input Input Group Label Menubar Navigation Menu Pagination Progress Radio Group Resizable Scroll Area Select Separator Slider Switch Table Tabs Textarea Toast Toggle Toggle Group Tooltip

Common components

These examples are ready to copy. See the component list above for the other exports.

Accordion

TSX

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from 'blackwork'

export const Faq = () => (
  <Accordion defaultValue={['install']}>
    <AccordionItem value="install">
      <AccordionTrigger>How do I install it?</AccordionTrigger>
      <AccordionContent>Run pnpm add blackwork.</AccordionContent>
    </AccordionItem>
  </Accordion>
)

Select

TSX

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from 'blackwork'

export const LanguageSelect = () => (
  <Select defaultValue="en">
    <SelectTrigger aria-label="Language">
      <SelectValue />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="en">English</SelectItem>
      <SelectItem value="zh">简体中文</SelectItem>
    </SelectContent>
  </Select>
)

Toast

Mount Toaster inside ThemeProvider. Calling toast does not require another provider.

TSX

import { Button, Toaster, toast } from 'blackwork'

export const SaveButton = () => (
  <>
    <Button onClick={() => toast.success('Saved')}>Save</Button>
    <Toaster />
  </>
)