@lingjingai/ui-kit
v0.7.0
Published
灵境 AI 标准组件库 —— 基于 shadcn (base-ui) 的可复用 UI 组件与设计 token。
Keywords
Readme
@lingjingai/ui-kit
灵境 AI 标准组件库 —— 基于 shadcn（base-ui 底座，base-nova style）的可复用 UI 组件与设计 token。
- 组件：全部由 shadcn CLI 生成，不手写、不魔改。
src/components/ui/下 55 个标准组件。 - 主题：完全由 token 驱动（
src/styles/theme.css）。改主题改 token，不改组件源码。 - 底座：
@base-ui/react，零 Radix 依赖。
安装
bun add @lingjingai/ui-kit
# peer：消费方需自备
bun add react react-dom tailwindcss tw-animate-css shadcn接入 Tailwind v4
在你的全局 CSS 入口里按顺序导入（tailwind 引擎 + nova 基础 + 本库 token），并用 @source 让 tailwind 扫描已编译的组件以提取 class：
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "@lingjingai/ui-kit/styles.css";
/* 让 tailwind 扫描库的产物，生成组件用到的 utility */
@source "../node_modules/@lingjingai/ui-kit/dist";
styles.css只含 token（@theme inline/:root/.dark/ 状态语义色），不含@import "tailwindcss"，避免与消费方重复导入引擎。
使用
import { Button, Badge, Tooltip, TooltipProvider } from "@lingjingai/ui-kit"
export function App() {
return (
<TooltipProvider>
<Button>开始</Button>
<Badge variant="secondary">草稿</Badge>
</TooltipProvider>
)
}部分组件（Tooltip 等）需要在应用根部包一层对应的 Provider，详见 shadcn 文档。
主题（light / dark）
暗色走 class 策略：给 <html>（或任意祖先）加 .dark 即切换。
document.documentElement.classList.toggle("dark")设计 token
通用语义色：
backgroundforegroundcardpopoverprimarysecondarymutedaccentdestructiveborderinputring，以及sidebar-*、chart-1..5。状态语义色（本库扩展，对齐设计系统）：
success— 成功 / 完成（emerald）info— 高亮 / 提示（blue）warning— 警告（amber）running— 处理中 / 进行中（green）
用法：
bg-success text-success-foreground（实心）或bg-success/10 text-success（低透明叠加）。半径阶梯：单一
--radius基值按比例派生--radius-sm..4xl。字体栈：
--app-font-sans（Inter + Noto Sans SC）、--app-font-mono（JetBrains Mono）。
业务专属 token（如剧本 paper / actor-cue、品牌 brand、业务动画）不属于本库，请在各消费应用自行定义。
构建
bun run build # tsup → dist（esm + d.ts + styles.css）
bun run typecheck