v0 Design System Component Library Guide: Generate Production-Ready UI Systems with shadcn/ui

Why v0 Is the Best Tool for Design System Generation

Design systems are the foundation of consistent UI development. But building one from scratch takes weeks — defining tokens, creating base components, composing compound patterns, documenting variants, ensuring accessibility, and testing across browsers. v0 compresses this timeline dramatically by generating production-quality React components with shadcn/ui and Tailwind CSS from natural language descriptions.

What makes v0 specifically suited for design systems (versus general AI code generation) is its deep integration with shadcn/ui. Every component v0 generates uses Radix UI primitives for accessibility, Tailwind CSS for styling, and the shadcn/ui component architecture for consistency. The output is not generic React code — it is code that follows the exact patterns your team would write if they had unlimited time.

This guide covers the workflow for using v0 to generate a complete, production-ready design system component library.

Step 1: Define Your Design Tokens

Color System

Before generating components, establish your color tokens:

"Create a design token system for a SaaS dashboard application.

Color palette:
- Primary: indigo (600 for default, 700 for hover, 500 for light)
- Secondary: slate (for neutral UI elements)
- Success: emerald
- Warning: amber
- Destructive: red
- Background: white (light mode), slate-950 (dark mode)
- Foreground: slate-900 (light mode), slate-50 (dark mode)

Generate as CSS custom properties in both light and dark mode
using the shadcn/ui token convention (:root and .dark)."

Typography Scale

"Create a typography scale with:
- Font family: Inter for UI, JetBrains Mono for code
- Scale: xs (12px), sm (14px), base (16px), lg (18px),
  xl (20px), 2xl (24px), 3xl (30px), 4xl (36px)
- Line heights optimized for readability
- Font weights: normal (400), medium (500), semibold (600), bold (700)

Generate as Tailwind CSS configuration."

Spacing and Layout Tokens

"Create a spacing system based on a 4px grid:
0.5 (2px), 1 (4px), 1.5 (6px), 2 (8px), 3 (12px),
4 (16px), 5 (20px), 6 (24px), 8 (32px), 10 (40px),
12 (48px), 16 (64px)

Border radius scale: sm (4px), md (6px), lg (8px),
xl (12px), 2xl (16px), full (9999px)"

Step 2: Generate Base Components

Button Component

"Create a comprehensive Button component with shadcn/ui:

Variants: default, secondary, outline, ghost, link, destructive
Sizes: sm, default, lg, icon
States: hover, focus, active, disabled, loading
Features:
- Left and right icon slots
- Loading spinner that replaces content
- Full width option
- As-child pattern for custom elements
- Proper focus ring styling
- Keyboard accessible (Enter and Space)

Include TypeScript props interface and all variant combinations."

Input Component

"Create an Input component system with shadcn/ui:

Types: text, email, password (with show/hide toggle), number, search
Features:
- Label integration
- Helper text below the input
- Error state with error message
- Character count for text inputs
- Prefix and suffix icons or text
- Clearable option (X button)
- Disabled and read-only states
- Focus ring matching the design system

All inputs must be accessible with proper label association."

Card Component

"Create a Card component system:

Parts: Card, CardHeader, CardTitle, CardDescription,
  CardContent, CardFooter
Variants: default (with border), elevated (with shadow),
  interactive (hover effect for clickable cards)
Features:
- Responsive padding (compact on mobile, comfortable on desktop)
- Header with optional action button area
- Support for media (image at top)
- Loading skeleton variant

Use shadcn/ui composition pattern."

Step 3: Build Compound Components

Data Table

"Create a DataTable component for SaaS dashboards:

Features:
- Column definitions with sortable, filterable, hideable columns
- Row selection (single and multi-select with checkboxes)
- Pagination (page size selector, page navigation)
- Search/filter bar with column-specific filters
- Column resizing and reordering
- Responsive: horizontal scroll on mobile, card view option
- Loading state with skeleton rows
- Empty state with illustration
- Bulk action bar (appears when rows are selected)
- Row click handler for detail views

Use @tanstack/react-table underneath, styled with the
design system tokens. Full TypeScript generics support."

Navigation / Sidebar

"Create a collapsible sidebar navigation component:

Features:
- Logo area at the top
- Navigation items with icons
- Nested items (expandable sections)
- Active state highlighting
- Collapsed mode (icons only, tooltip labels)
- User profile section at the bottom
- Mobile: overlay drawer with backdrop
- Keyboard navigation between items
- Badge/notification count on items

Use the design system colors and spacing.
Animated transitions for collapse/expand."

Form Builder

"Create a form component system that composes Input, Select,
Textarea, Checkbox, RadioGroup, and Switch:

Features:
- FormField wrapper with label, description, error
- Integration with react-hook-form
- Zod schema validation
- Inline and block error display
- Required field indicators
- Form-level error summary
- Submit button with loading state
- Dirty state tracking (unsaved changes warning)

Generate a complete example form: user profile editing
with name, email, bio, role (select), notifications
(switches), and timezone (combobox)."

Step 4: Add Variants and States

Theme Variants

"Add theme variant support to all components:

Themes: light (default), dark
Implementation:
- CSS custom properties that switch based on .dark class
- All components inherit colors from CSS variables
- Transition animation when switching themes (150ms)
- Theme toggle component (sun/moon icon button)

Test: generate a dashboard layout showing both themes
side by side."

Responsive Variants

"Make all components responsive with these breakpoints:
- Mobile: < 640px
- Tablet: 640px - 1024px
- Desktop: > 1024px

Specific adaptations:
- DataTable: card view on mobile, table on desktop
- Sidebar: drawer on mobile, fixed on desktop
- Forms: single column on mobile, multi-column on desktop
- Modals: full-screen on mobile, centered on desktop"

Step 5: Ensure Accessibility

Accessibility Audit Prompt

"Audit all generated components for WCAG 2.1 AA compliance:

Check and fix:
1. All interactive elements have visible focus indicators
2. Color contrast ratios meet 4.5:1 for text, 3:1 for UI
3. Form inputs have associated labels (not just placeholders)
4. Modals trap focus and return focus on close
5. Dropdown menus support keyboard navigation (arrow keys)
6. Error messages are announced to screen readers (aria-live)
7. Loading states communicate status (aria-busy)
8. Icons have aria-label or are aria-hidden if decorative
9. Tables have proper header associations
10. Touch targets are minimum 44x44px on mobile

Report any issues found and fix them."

Step 6: Export and Document

Exporting to Your Project

v0 generates components that slot directly into a Next.js + shadcn/ui project:

1. Copy component code from v0 to your components/ui/ directory
2. Install dependencies listed in the component imports
3. Add design tokens to your globals.css or tailwind.config.ts
4. Verify by rendering each component in a test page

Documentation Prompt

"Generate a component documentation page showing:

For each component:
1. Component name and description
2. All props with types and defaults
3. Usage examples (basic, with variants, with states)
4. Accessibility notes
5. Do's and Don'ts

Format as a Next.js page I can add to my /docs route.
Include a sidebar with component categories and search."

Advanced v0 Techniques for Design Systems

Generating from Figma Descriptions

If you have Figma designs but not the code:

"Create a component matching this design specification:
- Card with 16px padding, 8px border radius
- Header: 18px semibold text, 4px gap to description
- Description: 14px regular text, muted color
- Divider: 1px border-muted, 16px vertical margin
- Content area: flexible
- Footer: right-aligned action buttons with 8px gap
- Hover: subtle shadow increase (0 2px 8px rgba(0,0,0,0.08))

Match the shadcn/ui Card pattern."

Generating Animation Variants

"Add motion to the component system using Framer Motion:

- Page transitions: fade + slide up (200ms)
- Modal: scale from 95% to 100% + fade (200ms)
- Dropdown: slide down + fade (150ms)
- Toast notifications: slide in from right (300ms)
- Skeleton loading: pulse animation (1.5s loop)
- Accordion: height animation (200ms, ease-out)

Respect prefers-reduced-motion: disable all animations
when user has reduced motion preference."

Component Composition Patterns

"Show how to compose base components into these patterns:

1. Settings page: sidebar navigation + form sections
2. Pricing table: cards with feature comparison
3. User profile: avatar + info card + activity feed
4. Analytics dashboard: stat cards + charts + data table
5. Onboarding wizard: multi-step form with progress bar

Each pattern should use only the base components we have
already generated — no new primitive components."

Frequently Asked Questions

Can v0 generate components for frameworks other than React?

v0 primarily generates React components with shadcn/ui. For Vue, Svelte, or other frameworks, use the generated React code as a reference and adapt the patterns manually.

How do I keep generated components consistent?

Always reference your design tokens in prompts. Use phrases like “using the design system tokens” and “matching the existing component patterns.” Generate related components in the same session for maximum consistency.

Can v0 generate entire pages or just components?

Both. v0 can generate individual components, composed layouts, and complete pages. For design systems, start with components and build up to composed patterns.

Does v0 output match the quality of hand-written shadcn/ui components?

For standard patterns (buttons, inputs, cards, tables), v0 output is very close to what an experienced developer would write. For highly custom components, expect to make some manual adjustments.

How do I handle dark mode in v0 components?

Include “with dark mode support” in your prompt. v0 will generate components using CSS custom properties that respond to the .dark class, following the standard shadcn/ui theming approach.

Can I use v0 to generate a Storybook for my components?

You can ask v0 to generate Storybook stories for each component. Include “generate Storybook stories with all variants” in your prompt. Export the stories alongside the components.