Components

Choose a dedicated guide when the component owns behavior such as focus, loading, validation, or open state. Use the primitive catalog for smaller building blocks that follow shadcn/ui structure.

Blackwork includes page layouts, theme controls, forms, and basic UI components. Components specific to Blackwork, along with additions such as button loading states, have dedicated guides here.

Each dedicated page puts the common path before interactive previews, example code, and an API table, so usage can be checked without reading the whole catalog.

Component guides

Other components

The remaining UI components follow the structure and styles of shadcn/ui. Import these components from blackwork.

Blackwork 0.12 uses Base UI for component interactions. When following shadcn/ui documentation, check props against Blackwork’s TypeScript types; examples based on Radix UI may need changes.

Common components

The examples below cover basic Accordion, Select, and Toast usage. For other components, follow the links in the list above.

Accordion

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

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.

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

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