# @xingxingmofashu/ui

> React components with a CSS-only Liquid Glass visual style, built with Tailwind CSS 4 and Tailwind Variants.

Open-source React 19 components with a CSS-only Liquid Glass visual style,
built with Tailwind CSS 4 and Tailwind Variants.

- Documentation: https://xingxingmofashu.github.io/ui/docs/en
- GitHub: https://github.com/xingxingmofashu/ui
- npm: https://www.npmjs.com/package/@xingxingmofashu/ui

## Documentation

- [Introduction](https://xingxingmofashu.github.io/ui/docs/en/get-started/introduction): @xingxingmofashu/ui is a collection of typed React components with a Liquid Glass visual style for React 19 and Tailwind CSS 4.
- [Installation](https://xingxingmofashu.github.io/ui/docs/en/get-started/installation): Learn how to install and configure @xingxingmofashu/ui in a React application.
- [Guides](https://xingxingmofashu.github.io/ui/docs/en/guides): Practical guides for theming, forms, accessibility, server rendering, and starter templates.
- [Theming](https://xingxingmofashu.github.io/ui/docs/en/guides/theming): Customize the Liquid Glass material, light and dark tokens, and Tailwind aliases.
- [Forms](https://xingxingmofashu.github.io/ui/docs/en/guides/forms): Submit values, validate fields, and compose accessible React forms with the Liquid Glass controls.
- [Accessibility](https://xingxingmofashu.github.io/ui/docs/en/guides/accessibility): Labeling, keyboard behavior, focus management, and live-region support in the Liquid Glass components.
- [Server rendering](https://xingxingmofashu.github.io/ui/docs/en/guides/ssr): Use the server-safe Card, create client islands, and avoid hydration issues in Next.js and other React 19 frameworks.
- [Templates](https://xingxingmofashu.github.io/ui/docs/en/guides/templates): Start from the Vite starter or copy a Next.js settings panel and destructive confirmation recipe.
- [Overview](https://xingxingmofashu.github.io/ui/docs/en/components): Browse every component in @xingxingmofashu/ui.
- [Plugins](https://xingxingmofashu.github.io/ui/docs/en/plugins): Optional package entries for shared glass presets and other opt-in features.
- [Accordion](https://xingxingmofashu.github.io/ui/docs/en/components/accordion): A React accordion with collapsible Liquid Glass panels and keyboard support.
- [Alert Dialog](https://xingxingmofashu.github.io/ui/docs/en/components/alert-dialog): A React alert dialog for destructive confirmations, with a Liquid Glass surface and clear cancel and confirm actions.
- [Button](https://xingxingmofashu.github.io/ui/docs/en/components/button): A React button with a Liquid Glass style, five sizes, icon slots, and link rendering.
- [Card](https://xingxingmofashu.github.io/ui/docs/en/components/card): A server-safe React card with a Liquid Glass surface, header, body, and footer.
- [Checkbox](https://xingxingmofashu.github.io/ui/docs/en/components/checkbox): A React checkbox with a Liquid Glass tile, animated check, and indeterminate state.
- [Checkbox Group](https://xingxingmofashu.github.io/ui/docs/en/components/checkbox-group): A React checkbox group with Liquid Glass controls, labels, and descriptions.
- [Dialog](https://xingxingmofashu.github.io/ui/docs/en/components/dialog): A React dialog with a Liquid Glass surface and a custom action area.
- [Drawer](https://xingxingmofashu.github.io/ui/docs/en/components/drawer): A React drawer that slides in from any edge with a Liquid Glass surface and swipe dismissal.
- [Field](https://xingxingmofashu.github.io/ui/docs/en/components/field): A React field with a Liquid Glass label, description, and validation message for one form control.
- [Fieldset](https://xingxingmofashu.github.io/ui/docs/en/components/fieldset): A React fieldset with a Liquid Glass legend for grouping related form fields.
- [Form](https://xingxingmofashu.github.io/ui/docs/en/components/form): A React form with a Liquid Glass layout, consolidated server errors, and form-level validation.
- [Input](https://xingxingmofashu.github.io/ui/docs/en/components/input): A React input with a Liquid Glass field and icon slots.
- [Menu](https://xingxingmofashu.github.io/ui/docs/en/components/menu): A React menu with a Liquid Glass popup, groups, separators, icons, shortcuts, and controlled open state.
- [Popover](https://xingxingmofashu.github.io/ui/docs/en/components/popover): A non-modal React popover with a Liquid Glass panel anchored to a trigger.
- [Progress](https://xingxingmofashu.github.io/ui/docs/en/components/progress): A React progress bar with a linear Liquid Glass track, determinate and indeterminate states, and five sizes.
- [Radio Group](https://xingxingmofashu.github.io/ui/docs/en/components/radio-group): A React radio group with circular Liquid Glass controls, labels, descriptions, and keyboard navigation.
- [Scroll Area](https://xingxingmofashu.github.io/ui/docs/en/components/scroll-area): A React scroll area with native scrolling, Liquid Glass scrollbars, and a glass panel.
- [Select](https://xingxingmofashu.github.io/ui/docs/en/components/select): A React select with a Liquid Glass trigger for single or multiple values, grouped options, and five sizes.
- [Slider](https://xingxingmofashu.github.io/ui/docs/en/components/slider): A React slider with a Liquid Glass track, single values, ranges, and vertical orientation.
- [Switch](https://xingxingmofashu.github.io/ui/docs/en/components/switch): A React switch with a Liquid Glass thumb, label, description, and monochrome theme.
- [Tabs](https://xingxingmofashu.github.io/ui/docs/en/components/tabs): A React tabs component with a Liquid Glass tab list, animated active indicator, and keyboard navigation.
- [Toast](https://xingxingmofashu.github.io/ui/docs/en/components/toast): A React toast stack with a Liquid Glass style, actions, promise states, and four corner positions.
- [Toggle](https://xingxingmofashu.github.io/ui/docs/en/components/toggle): A React toggle button with a Liquid Glass pressed thumb, optional label and icon, and five sizes.
- [Toggle Group](https://xingxingmofashu.github.io/ui/docs/en/components/toggle-group): A React toggle group with Liquid Glass selected states, single or multiple selection, and two orientations.
- [Tooltip](https://xingxingmofashu.github.io/ui/docs/en/components/tooltip): A React tooltip with a Liquid Glass popup, configurable delay, placement, and an optional arrow.
- [Glass presets](https://xingxingmofashu.github.io/ui/docs/en/plugins/glass-preset): Switch the shared Liquid Glass material between thin, soft, regular, and thick, with a provider, scoped overrides, persistence, and a no-flash script.

## Full documentation

- [llms-full.txt](https://xingxingmofashu.github.io/ui/llms-full.txt): every page in one file.