v0 by Vercel - AI-Powered UI Development in 2026

Prompt: "Create a pricing page using our brand colors and typography"

v0 automatically:
- Uses your custom colors from design tokens
- Applies your typography scale
- Follows your spacing system
- Matches existing component patterns

// v0 now generates code using your existing components
import { Button, Card, Badge } from '@/components/ui';

// Instead of recreating shadcn/ui, v0 uses your versions
export function PricingCard({ plan }) {
  return (
    <Card>
      <Badge>{plan.badge}</Badge>
      <h3>{plan.name}</h3>
      <Button>{plan.cta}</Button>
    </Card>
  );
}

Prompt: "Add a smooth entrance animation to this card grid"

v0 generates:
- Framer Motion animations
- Staggered children effects
- Scroll-triggered reveals
- Respects prefers-reduced-motion

import { v0 } from '@vercel/v0';

const component = await v0.generate({
  prompt: 'A notification dropdown with read/unread states',
  designSystem: './design-tokens.json',
  componentLibrary: 'shadcn',
  framework: 'next',
});

console.log(component.code);
console.log(component.preview); // URL to preview

Prompt: "Generate a complete design system for a fintech app:
- Professional, trustworthy feel
- Accessible color palette
- Comprehensive component set
- Dark mode support"

v0 outputs:
- Color tokens (CSS variables)
- Typography scale
- Spacing system
- 50+ components
- Documentation