v0 UI Kit

Production-ready components

Kitchen sink

A single page that exercises all UI kit components with the new premium token palette.

Tailwind v4 + CSS variablesAccessible by defaultv0-friendly structure

Typography

Display font for headings, body font for UI, and mono for code. Includes h1–h6, body, small, and tiny presets.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Body

This is body text. Use tokens for consistent rhythm and premium contrast. Inline code cn(...) uses the mono font.

Small text for helper copy and metadata.

Tiny text for captions.

Colors

Primary, secondary, accent, and neutral scales (50–900) plus semantic colors—driven by CSS variables.

Primary

50 → 900

50

100

200

300

400

500

600

700

800

900

Secondary

50 → 900

50

100

200

300

400

500

600

700

800

900

Accent

50 → 900

50

100

200

300

400

500

600

700

800

900

Neutral

50 → 900

50

100

200

300

400

500

600

700

800

900

Semantic

Success / Warning / Error / Info

Success

Token-driven

Warning

Token-driven

Error

Token-driven

Info

Token-driven

Surfaces

Background / Card / Muted / Border

background

card

muted

border

Buttons

Variants, sizes, states, and icon support.

Variants

Sizes

States

Inputs

Labels, helper/error text, and prefix/suffix icons.

We’ll never share your email.

3–24 characters.

Password must be at least 8 characters.

Cards

Container + header/body/footer building blocks. Variants: default, bordered, elevated.

Promo

Full-width promo card

A premium surface promo card with a tone stripe and glow.

Browse templatesUpgrade

Default card

A clean surface for grouping UI.

Pro plan

$24 / month

Active

Bordered card

A clean surface for grouping UI.

Pro plan

$24 / month

Active

Elevated card

A clean surface for grouping UI.

Pro plan

$24 / month

Active

Display

Badges, chips, avatars, icons, figures, separators.

Badges / Chips / Avatars

Compact metadata and selection UI.

PrimarySuccessWarningErrorInfoOutline
Design SystemTag×

Jane Doe

Product designer

Sample media
Figure: image with a token-styled caption.

Separator

Use separators to structure content.

Above the separator.

Below the separator.

Forms

Inputs, textarea, checkbox, radio group, switch, file upload.

Text inputs

Selections

Occasional product news.

Plan

Great for trying it.

Best for shipping.

A settings-style switch container.

Try selecting multiple files.

Feedback

Alerts, tooltips, dialogs, skeletons, progress and spinners.

Success

Your changes were saved.

Heads up

This is a warning notification.

Error

Something went wrong.

Info

Token-driven components are easy to theme.

Dialog + Tooltip

Accessible primitives via Radix.

Skeleton + Progress

Layout

Tabs, pagination, grid system, container usage.

Tabs

Tab content panel styled with card tokens.

Pagination

Marketing

Hero, feature section, testimonial cards.

Feature section

A marketing-friendly section component.

Fast to remix

Copy blocks into v0 and iterate.

Build sections by composing primitives and tokens.

Token-driven

Edit CSS variables and ship a new theme.

Build sections by composing primitives and tokens.

Accessible

Keyboard + screen reader friendly.

Build sections by composing primitives and tokens.

“The defaults are gorgeous.”

This kit made our UI consistent in a day.

Customer
“The defaults are gorgeous.”

A. Customer

Founder • Acme

“We shipped faster with tokens.”

This kit made our UI consistent in a day.

Team
“We shipped faster with tokens.”

B. Engineer

Staff Engineer • Beta

“Everything is composable.”

This kit made our UI consistent in a day.

Design
“Everything is composable.”

C. Designer

Design Lead • Gamma