Vetro UI

Appearance

Vetro UIDeveloper docs

Vue 3 + TypeScript neo-brutalist UI kit — a Vue port of RetroUI. Ships as both a library and standalone Web Components.

Get started
Architecture
Storybook ↗
🚀

Getting started

Install, run, and ship a first change. Commands, env, and the toolchain in one page.

Start here

🧭

Architecture

Mental model, feature-first layout, dual-distribution (lib + web components).

Read the architecture

🌐

Web components

The webc build, Shadow-DOM style injection, dual-build pitfalls.

Web components

🎨

Styling

UnoCSS wind4 preset, theme tokens, the :uno: prefix and Shadow-DOM CSS.

Styling

🧪

Testing

Vitest via vite-plus/test, MSW, VTU2 quirks.

Testing

📦

Changesets & releases

Record changes on feature branches and the maintainer release flow on `main`.

Changesets

When to read what ​

I'm about to…Read
Install and run for the first timeGetting started
Add a new componentArchitecture + Conventions
Expose a component as a web componentWeb components
Style anythingStyling
Write testsTesting
Record a user-visible changeChangesets
Check a code-review ruleConventions
Write a commit messageGit conventions
Touch CICI

Live site ​

Handbook and component demos are deployed from main via GitHub Pages:

Project at a glance ​

  • Stack: Vue 3 + TypeScript strict, UnoCSS (wind4), Vite+ toolchain, ECharts for charts.
  • Two distributions: Vue library (dist/lib/) and standalone Web Components (dist/webc/) from one source tree.
  • Tests: Vitest via vite-plus/test + @vue/test-utils v2 + jsdom + MSW.
  • Package manager: pnpm (wrapped by Vite+; prefer vp commands).
  • Versioning: Changesets. Never edit package.json version or CHANGELOG.md by hand.

Vetro UI — Vue 3 neo-brutalist component library.

© 2026 Vetro