组件

组件负责焦点、加载、校验或打开状态时，优先查看对应的专门指南；更小、遵循 shadcn/ui 结构的基础部件可在原语目录中查找。

Blackwork 提供页面布局、主题、表单和基础 UI 组件。本站详细介绍了布局、小工具、主题和表单，也介绍了按钮加载状态等 Blackwork 提供的功能。

专门指南会先给出常见用法，再提供可交互预览、示例代码和 API 表，便于直接查找实现方式。

组件文档

液态玻璃布局小工具主题顶部进度条按钮对话框字段表单侧边面板

其余组件

其余 UI 组件的结构和样式参考 shadcn/ui，在项目中统一从 blackwork 引入。

Blackwork 0.12 使用 Base UI 实现基础交互。参考 shadcn/ui 文档时，属性以 Blackwork 的 TypeScript 类型为准；基于 Radix UI 的示例可能需要调整。

服务端组件

Alert、Badge、Card、Empty、Field、Input 也可以从 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

常用组件

下面展示 Accordion、Select 和 Toast 的基本用法。其他组件可以从上面的列表查找。

Accordion

TSX

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

export const Faq = () => (
  <Accordion defaultValue={['install']}>
    <AccordionItem value="install">
      <AccordionTrigger>怎样安装？</AccordionTrigger>
      <AccordionContent>运行 pnpm add blackwork。</AccordionContent>
    </AccordionItem>
  </Accordion>
)

Select

TSX

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

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

Toast

Toaster 要放在 ThemeProvider 里面，调用 toast 时不需要额外 provider。

TSX

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

export const SaveButton = () => (
  <>
    <Button onClick={() => toast.success('已保存')}>保存</Button>
    <Toaster />
  </>
)