VeanUI
A powerful, elegant Vue 3 component system with aria primitives and ready-to-use styled wrappers.
Library overview
Two Ways to Use VeanUI
Choose the distribution mode that fits your workflow — npm package for quick integration, or CLI copy-paste for full source control.
NPM Package
Traditional dependencyInstall @vean/ui as a dependency. Auto-import, tree-shaking, and seamless updates via your package manager.
- One-command install
- Auto-import with unplugin-vue-components
- Tree-shaking — only bundle what you use
- Seamless updates via package manager
- Nuxt module support
CLI · Copy-Paste
shadcn-styleCopy source code into your project with the vean CLI. Full control, full customization — you own the code.
- Components live in your source tree
- Edit any file — full customization
- vean diff to review upstream changes
- Only the components you add exist
- Perfect for custom design systems
Quick Setup
Install the package, wire the styling layer, and get the first screen rendering end to end.
Understand the Split
Review how the unstyled aria layer and the styled UI layer divide responsibility before choosing an integration strategy.
Browse the Catalog
Narrow the component choice set quickly by scanning primitives, patterns, and utilities by category.
Configure Theming
Learn how tokens, variants, and ui slot overrides work together before deeper customization.
Core Features
Aria First
@vean/aria focuses on state, behavior, and accessibility semantics without shipping any visual styling.
Styled Wrappers
@vean/ui ships S-prefixed styled components so common product surfaces can be delivered without rebuilding presentation from scratch.
Accessibility Built In
Follows WAI-ARIA patterns with keyboard navigation, focus management, and semantic state handling included.
Type-safe APIs
Built with TypeScript so components, slots, and configuration surfaces stay explicit during implementation.
Slot-level Overrides
Override local styling precisely through ui slot maps instead of rewriting entire components.
Theme-ready Variants
Variants are organized with UnoCSS and @soybeanjs/cva so design tokens and themes stay scalable.
Broad Component Coverage
Covers general UI, forms, navigation, overlays, and data display for the screens teams build most often.
Vue Ecosystem Friendly
Works smoothly with Nuxt, auto-import workflows, and living examples that shorten adoption time.
High-signal Components
If you want to feel the system quickly, these components show the most representative interaction surfaces.
Button
A foundational entry point for actions, state transitions, and forward motion in a flow.
Input
A reliable starting point for entry, search, and richer form composition.
Select
Covers filtering, mapping, and structured option selection in frequent product scenarios.
Dialog
A core overlay capability for confirmations, editing flows, and interruptive tasks.
Table
A key component for dense data reading, comparison, and structured presentation.
Form
Aligns field composition, validation, and submission feedback inside one workflow.