UI Lab

Side-by-side comparison of three approaches to building UI components with Nuxt 4 and Tailwind CSS.

🎨

Shadcn

Copy-paste components with Radix Vue primitives. Opinionated but customizable.

💎

PrimeVue (Volt)

Unstyled/headless mode with passthrough props. Full control over styling.

🎯

Pure Tailwind

No component library. Everything built from scratch with utility classes.

What's Being Compared

Each section implements the same set of components:

Buttons — Primary, secondary, destructive, outline, ghost, sizes
Form Controls — Input, select, checkbox, switch
Layout — Card, dialog, tabs

All components use the Zinc dark theme. The goal is to see how each approach handles the same design system — from full component library (Shadcn) to headless (PrimeVue Volt) to hand-rolled (pure Tailwind).