vd3UI
Vue 3 Design System & Components
Features
A standalone Vue 3 design system — components, composables, and tokens in one package, with the vd3-cbun bundle for charts, flowcharts, and more. Tap a card to dig in.
One Complete System
Tap to learn moreOne Complete System
vd3 is a standalone Vue 3 design system — typed components, a composable for every interaction, and design tokens, all shipped in a single package. No extra runtime, no configuration ceremony.
Built for Vue 3
Tap to learn moreBuilt for Vue 3
Typed <script setup> components, a composable for every interaction, Pinia-free reactive stores, and static rendering via vite-ssg. It's tree-shakeable ESM, so you pull in only the pieces you actually use.
The vd3-cbun Bundle
Tap to learn moreThe vd3-cbun Bundle
Need more than the core kit? @vanduo-oss/vd3-cbun adds production-ready charts, an interactive flowchart canvas, hex grids, and a full music player — each a typed Vue 3 component that inherits the same tokens.
One Source of Truth
Tap to learn moreOne Source of Truth
Design tokens ship with @vanduo-oss/vd3 as DTCG JSON and compile to the CSS variables every component reads. Change a token once and the whole system re-skins in lockstep — never drifting out of sync.
Fibonacci & Golden Ratio
Tap to learn moreFibonacci & Golden Ratio
Spacing, type scale, shadows, and grid layouts are derived from the Fibonacci sequence and the Golden Ratio, so layouts feel balanced without manual tweaking.
Accessible by Default
Tap to learn moreAccessible by Default
ARIA roles, visible focus rings, semantic markup, keyboard-first interactions, and prefers-reduced-motion support ship with every component. Accessibility is on from the start — never a bolt-on.
Dark Mode & Live Theming
Tap to learn moreDark Mode & Live Theming
Light, dark, and system-synced themes driven by CSS variables, with a drop-in switcher and a live customizer. Theme once at the token layer and every component re-skins instantly.
Conflict-Free
Tap to learn moreConflict-Free
Every class is namespaced with vd- and the components scope cleanly, so vd3 coexists with Bootstrap, Tailwind, or legacy styles without cascade surprises.
Docs Built for Copy-Paste
Tap to learn moreDocs Built for Copy-Paste
Every component and composable comes with a live demo, a typed API table, and copy-paste-ready snippets — written to read like the platform itself, so you can lift examples straight into your app.
Phosphor Icons
1,500+ icons in 6 weights, bundled locally. No CDN required.
Regular
Fill
Bold
Light
Thin
Duotone
Open Color Palette
Vanduo ships with Open Color (MIT) as its default palette — the friendly, battle-tested scale you already know. Prefer color that shares the golden-angle DNA of Vanduo's spacing and grid? The Fibonacci palette is one toggle away.