A universal UI component library: one codebase for Vue 2.7+ & Vue 3.2+. Built-in light/dark theme, PC & mobile ready, animation-free mode supported.
Warning
The project is under active development and is not ready for production.
| Vue version | Extra setup |
|---|---|
| 2.7.x | unplugin-vue-define-options@1.5.5+ |
| 3.2.x | unplugin-vue-define-options@3.1.2+ |
| >=3.3 | None |
Components declare their options through defineOptions(), a macro that only landed in Vue 3.3, so Vue 2.7 and Vue 3.2 need the transform plugin. See Installation for the setup.
- Universal: One codebase for Vue 2.7+ and Vue 3.2+, no
vue-demiand no duplicated source - Theming: Light & dark themes as plain CSS variables, switching is a single class toggle
- Motion-safe: Turn off every animation with
--duration: 0, or followprefers-reduced-motion - Responsive: Popovers become bottom sheets on small screens, with a built-in swipe gesture engine
- AI-ready: Bubble, Reasoning, ToolCall, Mention, CommandMenu and StickToBottom for chat UIs
- Lean: Only 7 runtime dependencies, ESM-only, full tree-shaking
- Accessible: Focus trap with nested-dialog coordination, keyboard navigation and ARIA roles
- TypeScript: Full type definitions, resolver for auto imports and Volar global component types
- Inspired by the Geist Design System
pnpm install
pnpm devpnpm build:libpnpm build:docspnpm build- Components that can be used independently do not need to add -group/-item suffix, such as:
Checkbox,Avatar,Toggle,ToggleButton - Components that are used to manage a group of sub-components need to add -group suffix, such as:
CheckboxGroup,RadioGroup,ToggleGroup,ToggleButtonGroup - Components that can only be used as a sub-component of another component need to add -item suffix, such as:
ListItem,GridItem,MessageItem