v0 Prompts — Generate Better UI with Vercel's v0

Create a {{component_name}} React component using shadcn/ui and Tailwind CSS.

Description: {{component_description}}

Design specs:
- Color palette: {{primary_color}} primary, neutral grays for backgrounds
- Border radius: 8px on cards, 6px on buttons and inputs
- Font: Inter or system sans-serif, 14px base, 600 weight for headings
- Spacing: 16px padding inside cards, 24px gap between sections

States to include:
- Default / idle
- Hover (subtle background shift + shadow)
- Loading (skeleton placeholder)
- Empty (friendly illustration or message)

Make it fully responsive. Use TypeScript with proper prop types.

Build a {{section_type}} section for a {{product_type}} website.

Layout: {{layout_description}}

Content:
- Headline: "{{headline}}"
- Subheadline: "{{subheadline}}"
- {{content_items}} (use realistic placeholder content, not lorem ipsum)

Design direction: {{design_reference}} aesthetic — {{design_details}}.

Tailwind only, no custom CSS. Use CSS Grid for the layout. Responsive breakpoints: single column on mobile, {{desktop_columns}} columns on lg:. Smooth fade-in animation on scroll using Tailwind animation utilities.

Export as a single component with no external dependencies beyond Tailwind.

Create a {{form_purpose}} form with the following fields:

{{field_list}}

Validation rules:
- All required fields show inline error messages below the input
- Email fields validate format
- {{custom_validation}}
- Show validation on blur, not on every keystroke

Design:
- Single column layout, max-width 480px, centered
- Labels above inputs, 12px font size, medium weight
- Inputs: 40px height, 1px gray-300 border, focus ring in {{accent_color}}
- Submit button: full width, {{accent_color}} background, white text, disabled state while submitting
- Success state: replace form with a confirmation message and checkmark icon

Use React Hook Form pattern for state management. TypeScript.

Create a {{dashboard_type}} dashboard with these sections:

Top bar:
- Logo (text "{{app_name}}") on the left
- Search input (cmd+K shortcut hint) in the center
- User avatar dropdown on the right

Sidebar (240px, collapsible):
- Navigation items: {{nav_items}}
- Active item: {{accent_color}} background, bold text
- Collapse to icons only on toggle

Main content area:
- Stats row: {{stat_cards}} displayed as cards with icon, label, value, and trend arrow
- Primary chart: {{chart_type}} chart (use a placeholder chart component)
- Data table: {{table_columns}} columns, sortable headers, pagination

Design: {{design_style}} theme. Use shadcn/ui components. Dark mode support via CSS variables. Responsive — sidebar becomes a hamburger menu on mobile.

Create a hero section for a {{product_type}} landing page.

Structure:
- Navigation bar: logo left, {{nav_links}} center, "Get Started" button right
- Hero: Split layout — left side has headline, description, two CTA buttons; right side has {{visual_element}}
- Headline: "{{headline}}" (text-5xl, font-bold, tracking-tight)
- Description: "{{description}}" (text-lg, text-gray-600, max-w-lg)
- Primary CTA: "{{primary_cta}}" — {{accent_color}} bg, white text, large
- Secondary CTA: "{{secondary_cta}}" — outline style

Below the fold: Logo bar with "Trusted by" and 5 placeholder company logos (gray, grayscale filter).

Design: Clean and modern. White background, generous whitespace. Subtle gradient orb behind the hero visual. Smooth entrance animation (fade up, 600ms stagger).

Create a design system showcase page that demonstrates these components at all breakpoints:

1. Button variants: primary, secondary, outline, ghost, destructive — each in sm, md, lg sizes
2. Input variants: text, email, password with show/hide toggle, textarea, select dropdown
3. Card component: image top, title, description, tags row, action buttons
4. Modal/Dialog: centered overlay with close button, title, body, footer with Cancel/Confirm
5. Toast notifications: success (green), error (red), info (blue) — positioned top-right

Design tokens:
- Colors: {{primary_color}} primary, slate gray neutral, semantic colors for success/error/warning
- Radius: 6px default, 12px for cards, full for badges
- Shadows: sm for cards, md for modals, lg for dropdowns

Layout: Grid each component category in its own section with a label. Responsive — 3 columns on desktop, 2 on tablet, 1 on mobile. Use Tailwind and shadcn/ui exclusively.