v0 Prompt Templates

Create a responsive navigation header:

Desktop:
- Logo on the left
- Navigation links in center: Home, Features, Pricing, Blog, Contact
- CTA buttons on right: "Log in" (text) and "Sign up" (filled)

Mobile:
- Logo left, hamburger menu right
- Menu opens as slide-out drawer (use Sheet component)
- All links stack vertically

Style:
- Sticky on scroll with backdrop blur
- Subtle border bottom
- Smooth transitions
- Works in light and dark mode

Create a dashboard sidebar:

Sections:
- Logo/brand at top
- Main navigation: Dashboard, Projects, Team, Messages, Settings
- Bottom: User avatar with name and logout

Features:
- Icons for each nav item (use Lucide)
- Active state indicator (left border or background)
- Collapsible to icon-only mode
- Hover tooltips when collapsed
- Smooth collapse/expand animation

Make it work in both light and dark mode.

Create a dashboard page layout with:

Structure:
- Sidebar on left (250px, collapsible)
- Header at top (sticky, with search and user menu)
- Main content area (scrollable)

Header contains:
- Breadcrumbs
- Search input
- Notification bell with badge
- User dropdown menu

Include responsive behavior:
- Mobile: sidebar becomes a drawer
- Tablet: sidebar collapsed by default
- Desktop: sidebar expanded

Use proper semantic HTML and accessibility.

Create a stats card showing:

- Icon in top left (customizable)
- Label text (e.g., "Total Revenue")
- Large number value
- Trend indicator: up/down arrow with percentage
  - Green for positive
  - Red for negative
- Optional: mini sparkline on the right

Card styling:
- Subtle shadow and rounded corners
- Slight hover lift effect
- Dark mode compatible

Make it a reusable component with props for all values.

Create a product card for e-commerce:

Layout:
- Product image (aspect ratio 4:3)
- "Sale" badge overlay when applicable
- Product name (truncate if long)
- Star rating (1-5 with review count)
- Price (with strikethrough original if on sale)
- "Add to Cart" button
- Heart icon for wishlist

Interactions:
- Image zoom on hover
- Heart fills on click
- Button shows loading on click

Make it responsive - 1 column mobile, 2 tablet, 4 desktop.

Create a pricing table with 3 tiers:

Tiers:
1. Free - $0 (limited features)
2. Pro - $19/mo (most features) - mark as "Popular"
3. Enterprise - $49/mo (all features)

Each card shows:
- Plan name
- Price with period
- Description (1 line)
- Feature list with checkmarks
- CTA button

Popular tier:
- Highlighted border/background
- "Most Popular" badge
- Slightly larger/elevated

Toggle at top: Monthly / Yearly (yearly shows savings)
Animate price change when toggling.

Create a login form component:

Fields:
- Email input with icon
- Password input with show/hide toggle
- "Remember me" checkbox
- "Forgot password?" link

Buttons:
- "Sign in" primary button (full width)
- Divider with "or"
- Social login buttons (Google, GitHub)

Additional:
- "Don't have an account? Sign up" link at bottom
- Form validation with inline errors
- Loading state on submit

Center in a card on a subtle gradient background.

Create a search input with autocomplete:

Features:
- Search icon on left
- Clear button when has text
- Keyboard shortcut indicator (Cmd+K)
- Dropdown with suggestions when typing
- Highlight matching text in suggestions
- Keyboard navigation (up/down, enter to select)

Suggestions show:
- Icon (varies by type)
- Title
- Category badge

Use Command component from shadcn/ui.
Include loading and empty states.

Create a date range picker:

Trigger:
- Button showing selected range
- Calendar icon
- Placeholder: "Select date range"

Popover content:
- Preset buttons: Today, Yesterday, Last 7 days, Last 30 days, This month, Custom
- Two calendars side by side for start/end
- Selected range highlighted between dates
- Apply and Cancel buttons

Features:
- Disable future dates (optional prop)
- Clear selection
- Keyboard accessible
- Works in dark mode

Create a data table component:

Columns:
- Checkbox for selection
- Name (sortable)
- Status (badge)
- Date (sortable)
- Amount (sortable, right-aligned)
- Actions (dropdown menu)

Features:
- Click column header to sort
- Checkbox to select rows
- Bulk actions appear when selected
- Pagination (10, 25, 50 per page)
- "X of Y rows" count
- Empty state when no data

Actions menu: View, Edit, Delete (with confirmation)

Use shadcn Table components.
Add loading skeleton state.

Create a kanban task card:

Card content:
- Task title
- Priority indicator (color dot: red/yellow/green)
- Tags/labels (colored badges)
- Avatar stack showing assignees
- Due date (highlight if overdue)
- Comment count with icon
- Attachment count with icon

Interactions:
- Drag handle on hover
- Click to open details
- Quick actions on hover (edit, delete)

Make it draggable with visual feedback.
Card should have subtle shadow that increases on drag.