Learn how to install and configure @xingxingmofashu/ui in a React application.
Requires React 19, React DOM 19, Tailwind CSS 4, and Node.js 22+.
pnpm add @xingxingmofashu/ui@import "tailwindcss";
@import "@xingxingmofashu/ui";The package root resolves to dist/index.css through its style export. The stylesheet includes its own Tailwind source scan, so no extra @source directive is needed.
import { Button } from "@xingxingmofashu/ui";
export function Example() {
return <Button label="Continue" />;
}Tip
Deep imports are available for a single component or theme recipe:
import { Button } from "@xingxingmofashu/ui/components/button";
import buttonTheme from "@xingxingmofashu/ui/theme/button";backdrop-filter, color-mix, container units, and :has.Card is server-safe and can render from a React Server Component. The interactive components are client components.
Light and dark tokens are selected by .light / .dark, or by data-theme="light" / data-theme="dark":
<html class="dark">or:
<html data-theme="dark">A nested .light / [data-theme="light"] subtree can switch back to light tokens. Shared colors and glass parameters live in the --ui-* tokens; override them in your own theme layer. Tailwind aliases use the ui- prefix (text-ui-ink, outline-ui-glass-focus, and so on) to avoid colliding with host tokens.