shadcn/ui Component Gallery

These are the looks you get out of the box — Button, Badge, Input, Card, Avatar, Alert — all built from Tailwind + Radix + cva, and copied into your repo so you own every line.

The default look

Button — variants

Badge

Default Secondary Error Outline

Input

Avatar + Alert

JV AK

Heads upYour trial ends in 3 days.

Card

Create project

Deploy your new project in one click.

# 1 · initialise shadcn in your project npx shadcn@latest init # 2 · add only the components you need — code is copied into your repo npx shadcn@latest add button card input badge avatar alert # 3 · they land here — yours to edit components/ui/button.tsx components/ui/card.tsx lib/utils.ts # the cn() helper

No node_modules black box — every component is source you can read, fork, and theme.