InkUI

InkUI is a React + CSS component library derived from the Twilight blog design system. It uses two colors — --bg and --fg — and derives every neutral, border, hover, and shadow from them with color-mix().

Features

• TypeScript-first React components
• Spec-compliant CSS tokens and component states
• Dark mode via html[data-mode="dark"]
• Reduced-motion support
• Small, dependency-free runtime

Installation

npm install ink-design react react-dom

Import the stylesheet once in your app (the package exports map serves dist/inkui.css):

import 'ink-design/styles.css';

Usage

import {
  Button,
  Chip,
  Input,
  Select,
  Switch,
  SegmentedControl,
  Card,
  Modal,
  message,
} from 'ink-design';

function App() {
  const [enabled, setEnabled] = React.useState(false);
  const [modalOpen, setModalOpen] = React.useState(false);

  return (
    <>
      <Button primary icon={<span>+</span>}>写文章</Button>
      <Chip solid onClick={() => alert('selected')}># React</Chip>
      <Input variant="box" placeholder="评论内容…" />
      <Select
        mode="tags"
        placeholder="输入标签后回车"
        options={[{ label: 'React', value: 'React' }]}
        onChange={(values) => console.log(values)}
      />
      <Switch checked={enabled} onChange={(e) => setEnabled(e.target.checked)} />
      <SegmentedControl
        value="published"
        options={[
          { label: '公开', value: 'published' },
          { label: '私密', value: 'private' },
          { label: '草稿', value: 'draft' },
        ]}
      />
      <Card variant="article">Article card</Card>
      <Modal
        open={modalOpen}
        title="确认"
        onOk={() => setModalOpen(false)}
        onCancel={() => setModalOpen(false)}
      >
        Content
      </Modal>
      <Button onClick={() => message.info('已保存', 2)}>轻提示</Button>
    </>
  );
}

Components

antd 风格能力集：Button Chip Badge Status IconButton Input Select（单选/多选/tags，antd 风格自绘下拉）AutoComplete Cascader TreeSelect Tree Transfer Upload DatePicker TimePicker Calendar Checkbox Radio Switch Slider Rate InputNumber InputOTP Mentions SegmentedControl Tabs Pagination Toolbar Dropzone CopyButton Card Icon Typography Space Flex Divider Layout Row Col ConfigProvider App Alert Result Empty Progress Skeleton Spin message notification Modal Drawer Popover Tooltip Popconfirm Dropdown Table List Descriptions Timeline Tag CheckableTag Statistic Collapse Image Avatar CountBadge Carousel QRCode Watermark Menu Breadcrumb Steps Anchor Form Splitter Affix。

2026-09 新增的 9 个 antd 对标组件（AutoComplete Cascader TreeSelect Tree Transfer Upload DatePicker TimePicker Calendar）：全部走 useControllableState 受控契约、forwardRef + displayName、@/ 别名导入，样式只从 --fg/--bg 派生；Upload 不做真实网络上传（在 beforeUpload 中自行接管），DatePicker showTime 复用 TimePicker。

博客时代的原始组件（NavRow NavLink AdminNav AdminNavLink TOC TOCLink）保留。一次性的遗留组件（Dialog/Toast/Pager/MiniAction/SearchButton/ShareButton/FAB/NotifyPanel/SearchOverlay/ColorInput/Range/TagInput）已于 2026-09 移除，语义分别由 Modal/message/Pagination/Button/Select mode="tags" 承接；原生 <select> 场景使用内部件 NativeSelect。

Development

npm install
npm run typecheck
npm run build          # build the library
npm run build:demo     # build the component demo into demo-dist/

The Vite library build emits dist/index.mjs, dist/index.cjs, TypeScript declarations, and dist/inkui.css. The Vite demo build emits a single self-contained demo-dist/index.html with all CSS and JavaScript inlined by vite-plugin-singlefile.