v0.dev

Create a [component type] that [functionality]
with [styling/features]

Create a modern hero section for a SaaS product
with a headline, subheading, CTA button, and
a product screenshot mockup. Include gradient
background and floating elements.

Create a pricing page with 3 tiers:
- Free, Pro ($29/mo), Enterprise (custom)
- Include feature comparison
- Highlight recommended plan
- Add toggle for monthly/yearly billing
- Modern card design with hover effects

Create a features section with 6 feature cards
in a 3x2 grid. Each card has an icon, title,
and description. Include subtle animations
on hover.

Create an analytics dashboard with:
- Stats cards (users, revenue, orders, growth)
- Line chart for trends
- Recent activity list
- Sidebar navigation
- Dark mode design

Create an admin dashboard layout with:
- Collapsible sidebar
- Top navbar with search and user menu
- Main content area with stats
- Recent orders table
- Quick actions panel

Create a login form with:
- Email and password fields
- Remember me checkbox
- Forgot password link
- Social login buttons (Google, GitHub)
- Clean, centered card design

Create a multi-step form wizard with:
- Progress indicator showing 4 steps
- Personal info, Address, Payment, Review
- Back and Next buttons
- Form validation indicators
- Smooth transitions between steps

Create a contact form with:
- Name, email, subject fields
- Message textarea
- File attachment option
- Submit button with loading state
- Success/error messages

Create an e-commerce product card with:
- Product image with hover zoom
- Title, price, rating stars
- Add to cart button
- Wishlist icon
- Sale badge option

Create a user profile card with:
- Avatar image
- Name and role/title
- Bio text
- Social media links
- Follow/Message buttons
- Stats (followers, following, posts)

Create a testimonial card with:
- Customer photo
- Quote text
- Name and company
- Star rating
- Subtle background pattern

Create a responsive navbar with:
- Logo on the left
- Navigation links in center
- Search bar
- User dropdown on right
- Mobile hamburger menu
- Sticky on scroll

Create a dashboard sidebar with:
- Logo at top
- Navigation sections with icons
- Collapsible sub-menus
- Active state indicator
- Collapse button
- User info at bottom

Create a data table with:
- Search and filter options
- Sortable columns
- Pagination
- Row selection checkboxes
- Actions dropdown per row
- Responsive design

Create a complete e-commerce product page with:
- Image gallery with thumbnails
- Product title, price, ratings
- Size and color selectors
- Quantity picker
- Add to cart and buy now buttons
- Product tabs (description, reviews, shipping)
- Related products section

Create a SaaS project management interface with:
- Kanban board with 3 columns
- Draggable task cards
- Add new task button
- Task card with title, assignee avatar,
  due date, and priority tag
- Column actions menu

Create a blog post page with:
- Hero image
- Title, author info, date
- Reading time estimate
- Article content with typography
- Table of contents sidebar
- Share buttons
- Related posts at bottom
- Comments section

Create a settings page with:
- Vertical tabs navigation
- Profile settings section
- Notification preferences with toggles
- Security settings (password, 2FA)
- Connected accounts
- Danger zone (delete account)
- Save changes button

Make it more modern with:
- Rounded corners (larger radius)
- Subtle shadows
- More whitespace
- Smoother transitions

Add dark mode variant

Change color scheme to use
blue and purple gradients

Make it responsive for mobile:
- Stack elements vertically
- Larger touch targets
- Collapsible sections

Add more whitespace between sections

Change to a 2-column layout on desktop

Add a loading skeleton state

Add hover animations to the cards

Include form validation with
error messages

Add success and error toast notifications

Replace placeholder text with
realistic content for a fitness app

Add more items to the navigation

Include empty state for when
there's no data

Step 1: Generate basic structure
"Create a dashboard layout"

Step 2: Add components
"Add stats cards at the top"

Step 3: Refine styling
"Use a blue color scheme"

Step 4: Add features
"Include loading states"

npx shadcn@latest init
npx shadcn@latest add button card input
npm install lucide-react

// Copy from v0 to your components folder
// components/ui/your-component.tsx

import { YourComponent } from '@/components/ui/your-component';

export default function Page() {
	return <YourComponent />;
}

npx create-next-app@latest my-app
cd my-app
npx shadcn@latest init

{
	"dependencies": {
		"@radix-ui/react-*": "latest",
		"class-variance-authority": "^0.7.0",
		"clsx": "^2.0.0",
		"lucide-react": "^0.263.1",
		"tailwind-merge": "^1.14.0"
	}
}

"Like [popular product]'s [component]"
Example: "Like Notion's sidebar navigation"

"Modern and minimal like Linear"

"With glassmorphism like Apple"

Add in your prompts:
- ARIA labels
- Keyboard navigation
- Focus indicators
- Screen reader support
- Color contrast compliance