PXD

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.

简体中文 | Online Preview

[!WARNING] The project is under active development and is not ready for production.

Requirements

| Vue version | Extra setup | | --- | --- | | 2.7.x | [email protected]+ | | 3.2.x | [email protected]+ | | >=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.

Features

• Universal: One codebase for Vue 2.7+ and Vue 3.2+, no vue-demi and 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 follow prefers-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

Contribution

Dev

pnpm install

pnpm dev

Build

Core only

pnpm build:lib

Docs only

pnpm build:docs

Deploy

pnpm build

Contribution Guidelines

Component Naming Rules

• 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

Reference

• Geist Design System
• Figma(Community)