v0

// Wygenerowany przez v0 komponent karty produktu
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Star, ShoppingCart } from "lucide-react"

interface ProductCardProps {
  name: string
  price: number
  rating: number
  image: string
  category: string
  inStock: boolean
}

export function ProductCard({ name, price, rating, image, category, inStock }: ProductCardProps) {
  return (
    <Card className="w-full max-w-sm overflow-hidden transition-shadow hover:shadow-lg">
      <div className="relative aspect-square overflow-hidden">
        <img
          src={image}
          alt={name}
          className="h-full w-full object-cover transition-transform hover:scale-105"
        />
        {!inStock && (
          <div className="absolute inset-0 flex items-center justify-center bg-black/50">
            <Badge variant="destructive">Wyprzedane</Badge>
          </div>
        )}
      </div>
      <CardHeader className="space-y-1">
        <div className="flex items-center justify-between">
          <Badge variant="secondary">{category}</Badge>
          <div className="flex items-center gap-1">
            <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
            <span className="text-sm font-medium">{rating}</span>
          </div>
        </div>
        <CardTitle className="line-clamp-2">{name}</CardTitle>
      </CardHeader>
      <CardContent>
        <p className="text-2xl font-bold">{price.toFixed(2)} zł</p>
      </CardContent>
      <CardFooter>
        <Button className="w-full" disabled={!inStock}>
          <ShoppingCart className="mr-2 h-4 w-4" />
          Dodaj do koszyka
        </Button>
      </CardFooter>
    </Card>
  )
}

❌ Prosty prompt (słaby wynik):
"Stwórz formularz"

✅ Szczegółowy prompt (świetny wynik):
"Stwórz formularz kontaktowy z polami: imię, email, temat (dropdown:
Zapytanie, Wsparcie, Współpraca), wiadomość (textarea). Dodaj walidację
inline, przycisk submit z loading state, i dark mode support. Użyj
shadcn/ui components z subtle animations."

# Opcja 1: Skopiuj kod bezpośrednio
# Kliknij "Copy Code" i wklej do swojego projektu

# Opcja 2: Użyj npx do instalacji komponentu
npx v0@latest add <component-url>

# Opcja 3: Integracja z projektem Next.js
# W projekcie Next.js możesz bezpośrednio importować z v0

## Szablon promptu v0

[TYP KOMPONENTU]: Co tworzysz (karta, formularz, dashboard)
[ZAWARTOŚĆ]: Jakie elementy zawiera
[FUNKCJONALNOŚĆ]: Jakie interakcje
[STYL]: Estetyka, motyw, kolorystyka
[TECHNOLOGIA]: shadcn/ui, Tailwind, React hooks
[DODATKOWE]: Dark mode, animacje, responsywność

Create a modern SaaS landing page with:

HERO SECTION:
- Gradient background (purple to blue)
- Large headline with typing animation effect
- Subheadline explaining the product value
- Two CTAs: "Start Free Trial" (primary) and "Watch Demo" (secondary/outline)
- Floating dashboard mockup image with shadow

FEATURES SECTION:
- 3 columns grid with icons
- Each feature: icon, title, description
- Subtle hover animation on cards

PRICING:
- 3 tier cards: Free, Pro, Enterprise
- Monthly/Annual toggle
- Highlighted "Most Popular" badge on Pro
- Feature comparison list

TESTIMONIALS:
- Carousel with customer quotes
- Avatar, name, company, quote

FOOTER:
- 4 column links layout
- Newsletter subscription
- Social media icons

Use shadcn/ui components, Tailwind CSS, smooth scroll,
and ensure full dark mode support.

Build an analytics dashboard with:

SIDEBAR:
- Logo at top
- Navigation: Dashboard, Analytics, Users, Settings, Reports
- Icons from lucide-react
- Collapsible on mobile
- Active state indicator
- User avatar and dropdown at bottom

MAIN CONTENT:
- Header with search, notifications bell, user menu
- Stats row: 4 metric cards (users, revenue, orders, conversion)
  - Each with icon, value, percentage change, sparkline chart

- Charts section:
  - Revenue over time (area chart)
  - Traffic sources (pie chart)

- Recent activity table:
  - Columns: User, Action, Date, Status
  - Pagination
  - Sort functionality
  - Status badges (Completed, Pending, Failed)

Use Recharts for charts, shadcn/ui for components,
framer-motion for subtle animations.

Design a product page for an e-commerce fashion store:

GALLERY:
- Main image with zoom on hover
- Thumbnail strip below (5 images)
- Click thumbnail to change main image
- Lightbox view on click

PRODUCT INFO:
- Breadcrumbs navigation
- Product title (large)
- Star rating with review count
- Price with strikethrough original price
- Color swatches (clickable)
- Size selector (S, M, L, XL) with size guide link
- Quantity selector
- Add to cart button (full width)
- Wishlist heart icon

TABS BELOW:
- Description
- Specifications (table format)
- Reviews (list with pagination)

RELATED PRODUCTS:
- Horizontal scrollable row
- 4 product cards visible

Mobile-first, fast loading, accessible.

# Najpierw skonfiguruj shadcn/ui w projekcie
npx shadcn@latest init

# Zainstaluj wymagane zależności
npm install @radix-ui/react-icons lucide-react

# Dodaj komponenty wygenerowane przez v0
npx v0@latest add https://v0.dev/chat/b/xxxxx

src/
├── app/
│   ├── page.tsx           # Używa komponentów z v0
│   └── dashboard/
│       └── page.tsx
├── components/
│   ├── ui/                # shadcn/ui base components
│   │   ├── button.tsx
│   │   ├── card.tsx
│   │   └── ...
│   └── v0/               # Komponenty wygenerowane przez v0
│       ├── hero-section.tsx
│       ├── pricing-cards.tsx
│       └── feature-grid.tsx
├── lib/
│   └── utils.ts           # cn() helper z shadcn
└── styles/
    └── globals.css        # Tailwind + shadcn styles

// Oryginalny komponent z v0
export function FeatureCard({ title, description, icon }: FeatureCardProps) {
  return (
    <Card>
      <CardHeader>
        {icon}
        <CardTitle>{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <p>{description}</p>
      </CardContent>
    </Card>
  )
}

// Twoje rozszerzenie z dodatkowymi funkcjami
export function FeatureCard({
  title,
  description,
  icon,
  href,        // Dodane
  onClick,     // Dodane
  isLoading    // Dodane
}: ExtendedFeatureCardProps) {
  const content = (
    <Card className={cn(
      "transition-all duration-200",
      href && "cursor-pointer hover:shadow-lg hover:-translate-y-1",
      isLoading && "opacity-50 pointer-events-none"
    )}>
      <CardHeader>
        {isLoading ? <Skeleton className="h-8 w-8" /> : icon}
        <CardTitle>{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <p>{description}</p>
      </CardContent>
    </Card>
  )

  if (href) {
    return <Link href={href}>{content}</Link>
  }

  if (onClick) {
    return <button onClick={onClick}>{content}</button>
  }

  return content
}

1. Wygeneruj komponent promptem
2. Użyj Visual Controls do dostrojenia
3. Sprawdź preview na różnych breakpoints
4. Kliknij "View Code" aby zobaczyć zmiany
5. Eksportuj finalny kod

// Domyślny output - React + Tailwind + shadcn/ui
export function Button({ children, variant = "default" }) {
  return (
    <button className={cn(
      "px-4 py-2 rounded-md font-medium",
      variant === "default" && "bg-primary text-primary-foreground",
      variant === "outline" && "border border-input"
    )}>
      {children}
    </button>
  )
}

<!-- Vue output -->
<template>
  <button :class="buttonClasses">
    <slot />
  </button>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  variant: {
    type: String,
    default: 'default'
  }
})

const buttonClasses = computed(() => [
  'px-4 py-2 rounded-md font-medium',
  props.variant === 'default' && 'bg-primary text-primary-foreground',
  props.variant === 'outline' && 'border border-input'
])
</script>

<!-- Svelte output -->
<script>
  export let variant = 'default'

  $: buttonClasses = [
    'px-4 py-2 rounded-md font-medium',
    variant === 'default' && 'bg-primary text-primary-foreground',
    variant === 'outline' && 'border border-input'
  ].filter(Boolean).join(' ')
</script>

<button class={buttonClasses}>
  <slot />
</button>

<!-- Vanilla HTML output -->
<button class="btn btn-default">
  Click me
</button>

<style>
.btn {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-weight: 500;
}
.btn-default {
  background-color: var(--primary);
  color: var(--primary-foreground);
}
.btn-outline {
  border: 1px solid var(--border);
}
</style>

// Problem: Brakujący import
// v0 automatycznie dodaje:
import { useState } from 'react'

// Problem: Niezdefiniowany typ
// v0 generuje interface:
interface CardProps {
  title: string
  description: string
}

// Problem: Accessibility
// v0 dodaje odpowiednie atrybuty:
<button aria-label="Close dialog">
  <X className="h-4 w-4" />
</button>

// Problem: Responsywność
// v0 dodaje breakpointy:
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">

Masz 2 tygodnie na MVP. Jak użyć v0?

Dzień 1-2: Landing page
- v0: "SaaS landing page with waitlist signup"
- Dostosuj branding w Visual Controls
- Eksportuj do Next.js

Dzień 3-5: Dashboard
- v0: "Admin dashboard with user management"
- Dodaj własną logikę biznesową
- Podłącz do API

Dzień 6-7: Onboarding
- v0: "Multi-step onboarding wizard"
- Zintegruj z auth (Clerk/NextAuth)

Efekt: Profesjonalny UI w tydzień zamiast miesiąca

Budujesz design system dla firmy:

1. Wygeneruj bazowe komponenty w v0:
   - Button (all variants)
   - Input, Select, Checkbox
   - Card, Modal, Toast
   - Table, Pagination

2. Dostosuj do brand guidelines:
   - Kolory firmowe
   - Typografia
   - Spacing system

3. Eksportuj jako bibliotekę:
   - Stwórz package npm
   - Dokumentacja Storybook
   - Testy jednostkowe

Efekt: Spójny design system w dni zamiast tygodni

Klient potrzebuje quick mockup:

1. Prompt na podstawie briefu
2. 15 minut iteracji
3. Live preview dla klienta
4. Feedback → kolejne iteracje
5. Eksport po akceptacji

Efekt: Mockup w godzinę, implementacja w dzień

✅ Pisz szczegółowe prompty z kontekstem
✅ Używaj nazw komponentów shadcn/ui w promptach
✅ Iteruj małymi krokami
✅ Sprawdzaj accessibility wygenerowanego kodu
✅ Dostosowuj kod do swoich konwencji po eksporcie
✅ Ucz się z wygenerowanego kodu

❌ Nie kopiuj kodu bez przeglądu
❌ Nie ignoruj TypeScript warnings
❌ Nie używaj v0 do logiki biznesowej
❌ Nie oczekuj perfekcji za pierwszym razem
❌ Nie używaj zbyt ogólnych promptów

## Struktura skutecznego promptu

1. KONTEKST - Czym jest projekt
   "For a healthcare SaaS dashboard..."

2. KOMPONENTY - Co używać
   "Using shadcn/ui Card, Button, and Table..."

3. FUNKCJONALNOŚĆ - Co robi
   "That displays patient list with search, sort, and pagination..."

4. STYL - Jak wygląda
   "Clean, minimal design with blue accent color..."

5. ZACHOWANIA - Interakcje
   "With hover states, loading skeletons, and empty states..."

6. TECHNICZNE - Wymagania
   "Fully accessible, dark mode support, mobile responsive..."

# 1. Wygeneruj komponent w v0
# 2. Eksportuj kod
# 3. Wklej do Cursor
# 4. Użyj Cursor AI do rozszerzenia:

"Add unit tests for this component"
"Create a Storybook story"
"Add form validation with Zod"

// Po eksporcie z v0, dodaj story:
import type { Meta, StoryObj } from '@storybook/react'
import { ProductCard } from './ProductCard'

const meta: Meta<typeof ProductCard> = {
  title: 'Components/ProductCard',
  component: ProductCard,
  tags: ['autodocs'],
}

export default meta
type Story = StoryObj<typeof ProductCard>

export const Default: Story = {
  args: {
    name: 'Product Name',
    price: 99.99,
    rating: 4.5,
    image: '/placeholder.jpg',
    category: 'Electronics',
    inStock: true,
  },
}

export const OutOfStock: Story = {
  args: {
    ...Default.args,
    inStock: false,
  },
}

# .github/workflows/v0-components.yml
name: Track v0 Components

on:
  push:
    paths:
      - 'src/components/v0/**'

jobs:
  document:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Generate component docs
        run: |
          # Track which v0 components are used
          find src/components/v0 -name "*.tsx" | wc -l

"Use my company design system colors:
- Primary: #1a365d (navy blue)
- Secondary: #ed8936 (orange)
- Background: #f7fafc (light gray)
And 8px spacing grid"

// Product card component generated by v0
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Star, ShoppingCart } from "lucide-react"

interface ProductCardProps {
  name: string
  price: number
  rating: number
  image: string
  category: string
  inStock: boolean
}

export function ProductCard({ name, price, rating, image, category, inStock }: ProductCardProps) {
  return (
    <Card className="w-full max-w-sm overflow-hidden transition-shadow hover:shadow-lg">
      <div className="relative aspect-square overflow-hidden">
        <img
          src={image}
          alt={name}
          className="h-full w-full object-cover transition-transform hover:scale-105"
        />
        {!inStock && (
          <div className="absolute inset-0 flex items-center justify-center bg-black/50">
            <Badge variant="destructive">Sold Out</Badge>
          </div>
        )}
      </div>
      <CardHeader className="space-y-1">
        <div className="flex items-center justify-between">
          <Badge variant="secondary">{category}</Badge>
          <div className="flex items-center gap-1">
            <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
            <span className="text-sm font-medium">{rating}</span>
          </div>
        </div>
        <CardTitle className="line-clamp-2">{name}</CardTitle>
      </CardHeader>
      <CardContent>
        <p className="text-2xl font-bold">${price.toFixed(2)}</p>
      </CardContent>
      <CardFooter>
        <Button className="w-full" disabled={!inStock}>
          <ShoppingCart className="mr-2 h-4 w-4" />
          Add to cart
        </Button>
      </CardFooter>
    </Card>
  )
}

❌ Simple prompt (weak result):
"Create a form"

✅ Detailed prompt (great result):
"Create a contact form with fields: name, email, subject (dropdown:
Inquiry, Support, Collaboration), message (textarea). Add inline
validation, a submit button with loading state, and dark mode support.
Use shadcn/ui components with subtle animations."

# Option 1: Copy code directly
# Click "Copy Code" and paste into your project

# Option 2: Use npx to install the component
npx v0@latest add <component-url>

# Option 3: Integration with a Next.js project
# In a Next.js project you can import directly from v0

## v0 prompt template

[COMPONENT TYPE]: What you're creating (card, form, dashboard)
[CONTENT]: What elements it contains
[FUNCTIONALITY]: What interactions it has
[STYLE]: Aesthetics, theme, color scheme
[TECHNOLOGY]: shadcn/ui, Tailwind, React hooks
[EXTRAS]: Dark mode, animations, responsiveness

Create a modern SaaS landing page with:

HERO SECTION:
- Gradient background (purple to blue)
- Large headline with typing animation effect
- Subheadline explaining the product value
- Two CTAs: "Start Free Trial" (primary) and "Watch Demo" (secondary/outline)
- Floating dashboard mockup image with shadow

FEATURES SECTION:
- 3 columns grid with icons
- Each feature: icon, title, description
- Subtle hover animation on cards

PRICING:
- 3 tier cards: Free, Pro, Enterprise
- Monthly/Annual toggle
- Highlighted "Most Popular" badge on Pro
- Feature comparison list

TESTIMONIALS:
- Carousel with customer quotes
- Avatar, name, company, quote

FOOTER:
- 4 column links layout
- Newsletter subscription
- Social media icons

Use shadcn/ui components, Tailwind CSS, smooth scroll,
and ensure full dark mode support.

Build an analytics dashboard with:

SIDEBAR:
- Logo at top
- Navigation: Dashboard, Analytics, Users, Settings, Reports
- Icons from lucide-react
- Collapsible on mobile
- Active state indicator
- User avatar and dropdown at bottom

MAIN CONTENT:
- Header with search, notifications bell, user menu
- Stats row: 4 metric cards (users, revenue, orders, conversion)
  - Each with icon, value, percentage change, sparkline chart

- Charts section:
  - Revenue over time (area chart)
  - Traffic sources (pie chart)

- Recent activity table:
  - Columns: User, Action, Date, Status
  - Pagination
  - Sort functionality
  - Status badges (Completed, Pending, Failed)

Use Recharts for charts, shadcn/ui for components,
framer-motion for subtle animations.

Design a product page for an e-commerce fashion store:

GALLERY:
- Main image with zoom on hover
- Thumbnail strip below (5 images)
- Click thumbnail to change main image
- Lightbox view on click

PRODUCT INFO:
- Breadcrumbs navigation
- Product title (large)
- Star rating with review count
- Price with strikethrough original price
- Color swatches (clickable)
- Size selector (S, M, L, XL) with size guide link
- Quantity selector
- Add to cart button (full width)
- Wishlist heart icon

TABS BELOW:
- Description
- Specifications (table format)
- Reviews (list with pagination)

RELATED PRODUCTS:
- Horizontal scrollable row
- 4 product cards visible

Mobile-first, fast loading, accessible.

# First, configure shadcn/ui in your project
npx shadcn@latest init

# Install required dependencies
npm install @radix-ui/react-icons lucide-react

# Add components generated by v0
npx v0@latest add https://v0.dev/chat/b/xxxxx

src/
├── app/
│   ├── page.tsx           # Uses components from v0
│   └── dashboard/
│       └── page.tsx
├── components/
│   ├── ui/                # shadcn/ui base components
│   │   ├── button.tsx
│   │   ├── card.tsx
│   │   └── ...
│   └── v0/               # Components generated by v0
│       ├── hero-section.tsx
│       ├── pricing-cards.tsx
│       └── feature-grid.tsx
├── lib/
│   └── utils.ts           # cn() helper from shadcn
└── styles/
    └── globals.css        # Tailwind + shadcn styles

// Original component from v0
export function FeatureCard({ title, description, icon }: FeatureCardProps) {
  return (
    <Card>
      <CardHeader>
        {icon}
        <CardTitle>{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <p>{description}</p>
      </CardContent>
    </Card>
  )
}

// Your extension with additional features
export function FeatureCard({
  title,
  description,
  icon,
  href,        // Added
  onClick,     // Added
  isLoading    // Added
}: ExtendedFeatureCardProps) {
  const content = (
    <Card className={cn(
      "transition-all duration-200",
      href && "cursor-pointer hover:shadow-lg hover:-translate-y-1",
      isLoading && "opacity-50 pointer-events-none"
    )}>
      <CardHeader>
        {isLoading ? <Skeleton className="h-8 w-8" /> : icon}
        <CardTitle>{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <p>{description}</p>
      </CardContent>
    </Card>
  )

  if (href) {
    return <Link href={href}>{content}</Link>
  }

  if (onClick) {
    return <button onClick={onClick}>{content}</button>
  }

  return content
}

1. Generate a component with a prompt
2. Use Visual Controls to fine-tune
3. Check the preview at different breakpoints
4. Click "View Code" to see the changes
5. Export the final code

// Default output - React + Tailwind + shadcn/ui
export function Button({ children, variant = "default" }) {
  return (
    <button className={cn(
      "px-4 py-2 rounded-md font-medium",
      variant === "default" && "bg-primary text-primary-foreground",
      variant === "outline" && "border border-input"
    )}>
      {children}
    </button>
  )
}

<!-- Vue output -->
<template>
  <button :class="buttonClasses">
    <slot />
  </button>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  variant: {
    type: String,
    default: 'default'
  }
})

const buttonClasses = computed(() => [
  'px-4 py-2 rounded-md font-medium',
  props.variant === 'default' && 'bg-primary text-primary-foreground',
  props.variant === 'outline' && 'border border-input'
])
</script>

<!-- Svelte output -->
<script>
  export let variant = 'default'

  $: buttonClasses = [
    'px-4 py-2 rounded-md font-medium',
    variant === 'default' && 'bg-primary text-primary-foreground',
    variant === 'outline' && 'border border-input'
  ].filter(Boolean).join(' ')
</script>

<button class={buttonClasses}>
  <slot />
</button>

<!-- Vanilla HTML output -->
<button class="btn btn-default">
  Click me
</button>

<style>
.btn {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-weight: 500;
}
.btn-default {
  background-color: var(--primary);
  color: var(--primary-foreground);
}
.btn-outline {
  border: 1px solid var(--border);
}
</style>

// Problem: Missing import
// v0 automatically adds:
import { useState } from 'react'

// Problem: Undefined type
// v0 generates the interface:
interface CardProps {
  title: string
  description: string
}

// Problem: Accessibility
// v0 adds the appropriate attributes:
<button aria-label="Close dialog">
  <X className="h-4 w-4" />
</button>

// Problem: Responsiveness
// v0 adds breakpoints:
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">

You have 2 weeks for an MVP. How to use v0?

Day 1-2: Landing page
- v0: "SaaS landing page with waitlist signup"
- Adjust branding in Visual Controls
- Export to Next.js

Day 3-5: Dashboard
- v0: "Admin dashboard with user management"
- Add your own business logic
- Connect to API

Day 6-7: Onboarding
- v0: "Multi-step onboarding wizard"
- Integrate with auth (Clerk/NextAuth)

Result: Professional UI in a week instead of a month

You're building a design system for your company:

1. Generate base components in v0:
   - Button (all variants)
   - Input, Select, Checkbox
   - Card, Modal, Toast
   - Table, Pagination

2. Customize to brand guidelines:
   - Company colors
   - Typography
   - Spacing system

3. Export as a library:
   - Create an npm package
   - Storybook documentation
   - Unit tests

Result: Consistent design system in days instead of weeks

A client needs a quick mockup:

1. Prompt based on the brief
2. 15 minutes of iterations
3. Live preview for the client
4. Feedback → more iterations
5. Export after approval

Result: Mockup in an hour, implementation in a day

✅ Write detailed prompts with context
✅ Use shadcn/ui component names in your prompts
✅ Iterate in small steps
✅ Check accessibility of generated code
✅ Adapt the code to your conventions after export
✅ Learn from the generated code

❌ Don't copy code without reviewing it
❌ Don't ignore TypeScript warnings
❌ Don't use v0 for business logic
❌ Don't expect perfection on the first try
❌ Don't use overly generic prompts

## Structure of an effective prompt

1. CONTEXT - What the project is about
   "For a healthcare SaaS dashboard..."

2. COMPONENTS - What to use
   "Using shadcn/ui Card, Button, and Table..."

3. FUNCTIONALITY - What it does
   "That displays patient list with search, sort, and pagination..."

4. STYLE - How it looks
   "Clean, minimal design with blue accent color..."

5. BEHAVIORS - Interactions
   "With hover states, loading skeletons, and empty states..."

6. TECHNICAL - Requirements
   "Fully accessible, dark mode support, mobile responsive..."

# 1. Generate a component in v0
# 2. Export the code
# 3. Paste into Cursor
# 4. Use Cursor AI to extend:

"Add unit tests for this component"
"Create a Storybook story"
"Add form validation with Zod"

// After exporting from v0, add a story:
import type { Meta, StoryObj } from '@storybook/react'
import { ProductCard } from './ProductCard'

const meta: Meta<typeof ProductCard> = {
  title: 'Components/ProductCard',
  component: ProductCard,
  tags: ['autodocs'],
}

export default meta
type Story = StoryObj<typeof ProductCard>

export const Default: Story = {
  args: {
    name: 'Product Name',
    price: 99.99,
    rating: 4.5,
    image: '/placeholder.jpg',
    category: 'Electronics',
    inStock: true,
  },
}

export const OutOfStock: Story = {
  args: {
    ...Default.args,
    inStock: false,
  },
}

# .github/workflows/v0-components.yml
name: Track v0 Components

on:
  push:
    paths:
      - 'src/components/v0/**'

jobs:
  document:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Generate component docs
        run: |
          # Track which v0 components are used
          find src/components/v0 -name "*.tsx" | wc -l

"Use my company design system colors:
- Primary: #1a365d (navy blue)
- Secondary: #ed8936 (orange)
- Background: #f7fafc (light gray)
And 8px spacing grid"