Package Exports
- @ydesign/ui-react
- @ydesign/ui-react/components
- @ydesign/ui-react/components/button
- @ydesign/ui-react/components/button-group
- @ydesign/ui-react/components/card
- @ydesign/ui-react/components/color-picker/color-picker
- @ydesign/ui-react/components/color-picker/color-value
- @ydesign/ui-react/components/color-picker/gradient-panel
- @ydesign/ui-react/components/color-picker/single-panel
- @ydesign/ui-react/components/divider
- @ydesign/ui-react/components/dropdown
- @ydesign/ui-react/components/index
- @ydesign/ui-react/components/input
- @ydesign/ui-react/components/input-number
- @ydesign/ui-react/components/message
- @ydesign/ui-react/components/modal
- @ydesign/ui-react/components/modal-static
- @ydesign/ui-react/components/popover
- @ydesign/ui-react/components/select
- @ydesign/ui-react/components/slider
- @ydesign/ui-react/components/spin
- @ydesign/ui-react/components/switch
- @ydesign/ui-react/components/tabs
- @ydesign/ui-react/components/tooltip
- @ydesign/ui-react/components/upload
- @ydesign/ui-react/package.json
- @ydesign/ui-react/style.css
- @ydesign/ui-react/theme
Readme
@ydesign/ui-react
React UI 组件库，基于 Ark UI（headless 状态机）+ Tailwind v4 + @ydesign/ui-tokens 主题系统。
跨框架等价：@ydesign/ui-vue 提供同名 API。
安装
pnpm add @ydesign/ui-react @ydesign/ui-tokens样式入口：
import '@ydesign/ui-tokens/style.css';主题系统
useTheme() — 读 + 改
import { useTheme } from '@ydesign/ui-react/theme';
function ZoomBadge() {
const { mode, preset, color, setMode, setPreset } = useTheme();
return (
<div style={{ background: 'var(--ydl-color-primary-bg)', color: 'var(--ydl-color-primary)' }}>
Current: {mode} / {preset}（hex {color}）
</div>
);
}<ThemeSwitcher /> — HeroUI 同款体验
import { ThemeSwitcher } from '@ydesign/ui-react/theme';
function Topbar() {
return (
<header>
<ThemeSwitcher /> {/* 一个组件搞定明暗 + 11 种预设的可视化切换 */}
</header>
);
}也可以用细粒度：<ModeToggle />、<PresetPicker />。
<ThemeProvider />（可选）
主题状态默认就是 @ydesign/ui-tokens 的全局单例（持久化到 localStorage），任意组件 useTheme() 都能拿到。不强求 Provider，但提供它用于：
<ThemeProvider defaultMode="dark" defaultPreset="discord">
<App />
</ThemeProvider>强制覆盖初始值（仅一次）。
预设列表
| id | 主色 | id | 主色 |
|---|---|---|---|
default |
#1677ff | spotify |
#1db954 |
sky |
#06b6d4 | coinbase |
#0052ff |
lavender |
#a78bfa | airbnb |
#ff385c |
mint |
#10b981 | discord |
#5865f2 |
netflix |
#e50914 | rabbit |
#f59e0b |
uber |
#2c2c2c (dark: #ededed) |
每个预设只定义"主色"一个值，hover / active / bg / border 等 6 个衍生 token 通过 CSS color-mix() 自动派生，并且在 dark 模式下使用不同公式（hover 偏亮、bg 偏深）。
业务方添加自定义预设：直接在自己的 CSS 里写：
[data-preset='my-brand'] {
--ydl-color-primary: #ff6b00;
}JS 侧调用：
import { setTheme } from '@ydesign/ui-react/theme';
setTheme({ preset: 'my-brand' as any });与 antd 的联动
如果你的项目还在用 antd，可以让 antd 的 colorPrimary 跟随 ydesign 主题：
import { useTheme } from '@ydesign/ui-react/theme';
import { ConfigProvider, theme } from 'antd';
function Root({ children }) {
const { mode, color } = useTheme();
return (
<ConfigProvider
theme={{
algorithm: mode === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm,
token: { colorPrimary: color },
}}
>
{children}
</ConfigProvider>
);
}