安装

安装步骤复制锚点链接

添加到 React 项目复制锚点链接

pnpm add @xingxingmofashu/ui

@import "tailwindcss";
@import "@xingxingmofashu/ui";

import { Button } from "@xingxingmofashu/ui";

export function Example() {
  return <Button label="继续" />;
}

import { Button } from "@xingxingmofashu/ui/components/button";
import buttonTheme from "@xingxingmofashu/ui/theme/button";

环境要求复制锚点链接

• Node.js 22 或更高版本。
• React 与 React DOM 19。
• Tailwind CSS 4。
• 支持 ESM 的打包器。包只发布 ES 模块。
• 支持 backdrop-filter、color-mix、容器单位与 :has 的现代浏览器。

Card 可以从 React Server Component 渲染；交互组件是客户端组件。

主题复制锚点链接

明暗 token 通过 .light / .dark 或 data-theme="light" / data-theme="dark" 切换：

<html class="dark">

或：

<html data-theme="dark">

嵌套的 .light / [data-theme="light"] 子树可以切回浅色 token。共享颜色与玻璃参数位于 --ui-* token 中，可在自己的主题层覆盖。Tailwind 别名使用 ui- 前缀（text-ui-ink、outline-ui-glass-focus 等），避免与宿主项目的 token 冲突。

常见问题复制锚点链接

下一步复制锚点链接