north-star-ui

OAC Design System — 基于 OAC 品牌规范的 React 组件库。Token 驱动、零图标依赖、自带编译好的 CSS。

一行引入即可用，不要求消费方配置 Tailwind。所有颜色 / 圆角 / 阴影由 CSS 变量驱动，覆盖 :root 变量即可换肤。

安装

npm install north-star-ui
# 或 pnpm add north-star-ui

peer 依赖 react / react-dom（>=18）。Radix、date-fns 等作为普通依赖自动安装。图标不内置，需自备（推荐 lucide-react）。

使用

// 1. 在应用入口引入一次编译好的样式
import "north-star-ui/style.css";

// 2. 按需引入组件
import { Button, StatCard, Dialog } from "north-star-ui";
import { Trash2 } from "lucide-react";

export function Demo() {
  return (
    <Button variant="primary" icon={<Trash2 />}>
      删除
    </Button>
  );
}

style.css 已包含 :root / .dark 全部 token 变量与组件所需的工具类，无需在消费方项目里配置 Tailwind content。

组件（24）

| 分类 | 组件 | |---|---| | 容器 / 展示 | Surface StatCard Chip EmptyState PageSection Timeline | | 表单 | SearchInput FormField Checkbox Radio(RadioGroup/RadioGroupItem) Switch DatePicker TimePicker Cascader Upload | | 动作 | Button IconButton | | 导航 | TabNav Breadcrumb SideNav Pagination Steps | | 浮层 | Dialog(+ DialogTrigger/DialogContent/DialogHeader/DialogFooter/DialogTitle/DialogDescription/DialogClose) Popover(+ PopoverTrigger/PopoverAnchor/PopoverClose/PopoverContent) | | 工具 | cn（className 合并） |

完整 Props 见仓库 packages/ui/NORTH_STAR_UI.md。

主题定制

所有视觉值走 CSS 变量，在自己项目的全局 CSS 覆盖 :root 即可，无需改组件源码：

:root {
  --brand: #ef3f24;        /* 品牌主色 */
  --brand-hover: #d63520;
  --brand-active: #bb1800;
  --radius-card: 16px;     /* 卡片圆角 */
}

Token 速查（默认值）

| Token | 用途 | 默认值 | |---|---|---| | --brand | 品牌主色 | #EF3F24 | | --brand-hover | 主色悬停 | #D63520 | | --brand-active | 主色按下 | #BB1800 | | --brand-soft | 主色浅底 | #FFF0EE | | --brand-tint | 主色极浅底 | #FFF4F1 | | --ink | 主文字 | #18181B | | --ink-2 | 次要文字 | #535254 | | --surface-page | 页面底色 | #F9F9F9 | | --surface-subtle | 次级面 | #FBFBFA | | --border | 通用边框 | #E4E4E7 | | --radius-card | 卡片圆角 | 16px | | --radius-section | 区块圆角 | 12px | | --radius-input | 输入框圆角 | 8px | | --radius-chip | 胶囊圆角 | 9999px | | --shadow-ambient | 环境阴影 | 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04) | | --shadow-soft | 柔和阴影 | 0 4px 6px rgba(0,0,0,.05), 0 2px 4px rgba(0,0,0,.03) |

暗色模式

给根元素加 class="dark" 即启用内置暗色 token（style.css 已含 .dark 变量块）。

图标

组件不内置任何图标，一律通过 props 传入，不强绑图标库：

import { Search } from "lucide-react";
<SearchInput icon={<Search />} />

许可

MIT