@ydesign/ui-react

@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>
  );
}