🎨 Shadcn Components

Built with shadcn-vue — copy-paste components using Radix Vue primitives, styled with Tailwind CSS variables. Uses --background, --primary, etc. Toggle the "Shadcn CSS" button in the top bar to see the difference.

Buttons

Variants

Sizes

Form Controls

Input

Textarea

Select

Checkbox label

Switch

Card

Card Title

Card description goes here with some details.

This card uses Shadcn's Card components with their built-in styling system driven by CSS variables.

Tabs

Content for Account tab.

Dialog

Developer Experience: Shadcn components are copy-pasted into your project (app/components/ui/). You own the code — full customization via CVA variants and Tailwind CSS variables. Components auto-import in Nuxt, so no manual imports needed. The --background, --primary, etc. variables drive theming globally.