@xingxingmofashu/ui is a collection of typed React components with a Liquid Glass visual style, built with Tailwind CSS and Tailwind Variants. Glass surfaces, rim highlights, and inner shadows are drawn entirely with CSS.

The package ships twenty-five components: Accordion, Alert Dialog, Button, Card, Checkbox, Checkbox Group, Dialog, Drawer, Field, Fieldset, Form, Input, Menu, Popover, Progress, Radio Group, Scroll Area, Select, Slider, Switch, Tabs, Toast, Toggle, Toggle Group, and Tooltip.

[!NOTE] Requires React 19, React DOM 19, Tailwind CSS 4, Node.js 22+, and an ESM-capable bundler. Card is server-safe; the interactive components are client components.

Documentation

• English
• 简体中文
• llms.txt — a compact index for language models and agents
• llms-full.txt — every guide and component page in one file

Agent skill

The portable skill in skills/xingxingmofashu-ui teaches coding agents how to install, compose, theme, and troubleshoot the components. It lives in the repository and is not included in the npm package. See the skill README for OpenCode, Claude Code, and compatible agent setup.

Installation

pnpm add @xingxingmofashu/ui

yarn add @xingxingmofashu/ui

npm install @xingxingmofashu/ui

bun add @xingxingmofashu/ui

Add the package styles to your Tailwind CSS entry:

@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 component utilities are generated without an extra @source directive.

Glass presets

Import the optional preset stylesheet:

@import "@xingxingmofashu/ui/plugins/glass-preset/index.css";

Then switch the shared glass material with data-glass on the root or any container:

<html data-glass="thin">
<section data-glass="thick">...</section>

thin is the default and the clearest, soft adds diffusion for secondary text, regular balances transparency with text separation, and thick is the most readable over busy imagery. Presets only override shared CSS variables and adjust both the in-page and overlay veils. Text-bearing overlays use .ui-glass-overlay and --ui-glass-overlay-surface; override that token too when you change --ui-surface. Without the plugin stylesheet, the main stylesheet still uses the thin material.

The optional React plugin manages the attribute and persistence:

import {
  GlassPresetProvider,
  GlassPresetScope,
  GlassPresetScript,
} from "@xingxingmofashu/ui/plugins/glass-preset";

// In <head>, before React hydrates.
<GlassPresetScript storageKey="app-glass" />;

// Around the application.
<GlassPresetProvider storageKey="app-glass">
  {children}
</GlassPresetProvider>;

// Or scope one container without changing the global preset.
<GlassPresetScope preset="thick">{children}</GlassPresetScope>;

The provider writes data-glass to <html> and exposes useGlassPreset(). Pass preset and onPresetChange for controlled state, or defaultPreset for an uncontrolled initial value.

Usage

import { Button, Card, Switch } from "@xingxingmofashu/ui";

export function Example() {
  return (
    <Card title="Liquid glass" description="CSS-only frosted panel.">
      <Switch label="Notifications" defaultChecked />
      <Button label="Continue" />
    </Card>
  );
}

Deep imports

Import a single component or theme recipe without going through the package root:

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

Toast hooks live under @xingxingmofashu/ui/composables/use-toast.

Development

pnpm install
pnpm build           # build dist with unbuild
pnpm lint            # lint with oxlint
pnpm test            # run the Vitest suite
pnpm test:e2e        # run the Playwright browser suite
pnpm typecheck       # typecheck the package
pnpm docs:dev        # docs site on http://localhost:3001
pnpm playground:dev  # React REPL on http://localhost:3002

The documentation site lives in docs/ and the React REPL lives in playground/; both import the package from the workspace. The REPL compiles TSX in the browser with Monaco's TypeScript worker and runs the result against a small import whitelist.

Contribution

Found a bug? Open an issue with a reproduction. Before opening a pull request, run pnpm lint, pnpm test, and pnpm typecheck.

[!TIP] AGENTS.md describes the component, theme, test, and documentation conventions used in this repository.

Credits

• Tailwind CSS
• Tailwind Variants

License

Licensed under the MIT license.