Design System
Design System v1.0

Beautiful UI components built with Radix UI and Tailwind CSS

A comprehensive collection of accessible, customizable, and production-ready components. Copy and paste into your apps and make them your own.

Buttons

Displays a button or a component that looks like a button.

Variants
Different button styles for various contexts
Sizes
Buttons come in different sizes
With Icons
Buttons with leading or trailing icons
States
Loading and disabled states

Badges

Displays a badge or a component that looks like a badge.

Variants
Different badge styles for various purposes
DefaultSecondaryDestructiveOutline
With Icons
Badges with icons for enhanced meaning
SuccessPendingFailedWarning
Status Indicators
Common use cases for status display
NewFeaturedTrending
Interactive Badges
Badges as links or buttons
Clickable BadgeLink BadgeOutline Link

Cards

Displays a card with header, content, and footer.

Simple Card
A basic card with title and description

This is a simple card component that can be used to display content in a contained format.

Card with Action
Features an action button in the header

This card includes a header action for additional options or controls.

CN
Sarah Wilson
Product Designer

Just shipped a new feature! Really excited about the user feedback we've been receiving.

Featured
Wide Card Layout
This card spans multiple columns to demonstrate flexibility

2,350

Total Users

1,234

Active Today

87%

Engagement Rate

Pricing Card
Pro Plan
$29/month
  • Unlimited projects
  • Priority support
  • Advanced analytics

Alerts

Displays a callout for user attention.

Default Alert
Standard alert for general information
Destructive Alert
Alert for errors and warnings
Contextual Alerts
Various alert styles for different contexts

Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Single Accordion
Only one item can be open at a time

Multiple Accordion
Multiple items can be open simultaneously

FAQ Section
A common use case for accordions

Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Basic Tabs
Simple tab navigation
Tabs with Icons
Enhanced visual navigation

Profile Settings

Manage your public profile information.

Content Tabs
Tabs for organizing different types of content

Total Revenue

$45,231.89

+20.1% from last month

Subscriptions

+2,350

+180.1% from last month

Active Now

+573

+201 since last hour

Tables

A responsive table component for displaying data.

Invoice Table
A list of recent invoices with status and amount
A list of your recent invoices.
InvoiceStatusMethodAmount
INV001PaidCredit Card$250.00
INV002PendingPayPal$150.00
INV003UnpaidBank Transfer$350.00
INV004PaidCredit Card$450.00
INV005PaidPayPal$550.00
Total$1,750.00
User Management
Team members with roles and status
UserRoleStatus
OM

Olivia Martin

[email protected]

AdminActive
JL
EditorActive
IN

Isabella Nguyen

[email protected]

ViewerInactive
WK
EditorActive

Charts

Data visualization components built with Recharts and styled for your design system.

Bar Chart
Desktop vs Mobile visitors comparison
Line Chart
Revenue vs Expenses over time
Area Chart
Monthly website visitors
Pie Chart
Browser market share
Radar Chart
Student performance comparison
Radial Chart
Progress indicator
Stacked Bar Chart
Combined desktop and mobile traffic

Form Components

Building blocks for creating beautiful forms.

Input Fields
Various input types and states
Select & Textarea
Dropdown and multi-line inputs
Toggle Controls
Switches, checkboxes, and radio buttons

Receive emails about new products

Get notified on your device

Radio & Slider
Selection and range inputs
Contact Form Example
A complete form with multiple input types

Miscellaneous

Additional commonly used UI components.

Avatars
User profile images with fallbacks
CNVCJDAB
ABC+5
Progress
Visual progress indicators
Upload progress25%
Storage used60%
Tasks completed90%
Tooltips
Contextual information on hover
Skeleton
Loading placeholders
Separators
Visual dividers for content

Section One

Content for the first section.

Section Two

Content for the second section.

Home
About
Contact
Combined Example
Multiple components together
CN
Sarah WilsonPro

Product Designer

Profile Completion85%
Built with v0