React component library and design tokens for the Talon Pilot design system.

All Ant-Design-parity targets met across four blocks:

• Block 1 (0.2.0): Button, Input, Textarea, Tag, Avatar (+ AvatarGroup), Card, Badge, Divider, Space, Typography (Title / Text / Paragraph / Link)
• Block 2 (0.3.0): Form (react-hook-form), Checkbox, Radio, Switch, Slider, NumberInput, Rate, Select, Combobox, DatePicker, TimePicker, Upload, ColorPicker
• Block 3 (0.4.0): Tabs, Tooltip, Popover, Popconfirm, Menu, Modal, Drawer, Banner, Toast, Pagination, Stepper, Breadcrumb
• Block 4 (0.5.0): Skeleton, Spin, Empty, Result, Statistic, Progress (linear + circular), Descriptions, Collapse, KanbanCard, BusinessRows (FileRefRow / RoleRow / RuntimeRow / RiskRow)

pnpm add @talon-ui/react @talon-ui/tokens

Add the Talon UI preset to your Tailwind config:

// tailwind.config.js
const { talonPreset } = require('@talon-ui/tokens/tailwind.preset.cjs');

module.exports = {
  presets: [talonPreset],
  content: ['./src/**/*.{ts,tsx}'],
};

Then import the component stylesheet once at your app entry:

import '@talon-ui/react/styles.css';

Import the token stylesheet directly — components will render with Talon design tokens but without Tailwind utility classes:

import '@talon-ui/tokens/tokens.css';
import '@talon-ui/react/styles.css';

import { Button, Tag, Avatar } from '@talon-ui/react';

export default function App() {
  return (
    <div>
      <Avatar alt="Ada Lovelace" fallback="AL" />
      <Tag tone="done">Online</Tag>
      <Button variant="primary">Get started</Button>
    </div>
  );
}

pnpm install
pnpm dev          # watch mode, all packages in parallel
pnpm test         # run all tests
pnpm build        # production build, all packages
pnpm preflight    # publish audit — run before any release
pnpm docs:dev     # start dumi docs dev server (apps/docs)
pnpm docs:build   # build dumi docs site to apps/docs/dist/
pnpm test:visual  # visual regression against built docs site (Playwright, 0.1% threshold)

apps/docs 支持 Cloudflare 自动发布。接入说明见 docs/DEPLOYMENT.md。

配置完成后：

• 推送到 main 会发布生产站点
• Pull Request 会生成预览站点

Tokens live only in packages/tokens/src/. skills/talon-ui/assets/ are reverse-symlinks; do not edit them directly.

Skills live only in skills/. .claude/, .codex/, .agents/ (and any future agent runtime) must reference them via skills symlink. CI enforces this.

• Design spec: docs/superpowers/specs/2026-05-11-talon-ui-library-design.md
• Foundation plan: docs/superpowers/plans/2026-05-11-talon-ui-foundation.md
• Aggregated changelog: CHANGELOG.md
• Per-package changelogs: packages/react/CHANGELOG.md, packages/tokens/CHANGELOG.md

MIT. See LICENSE.

• Reserve the @talon-ui npm scope (if not already done).
• Add NPM_TOKEN secret to the GitHub repository so release.yml can publish.
• Decide whether to make the GitHub repo public.