Landing
E-commerce Product Card
A product card with image, title, price, rating, badge, and quick-add-to-cart button.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultybeginner
English Prompt
Create an e-commerce product card. Include a product image placeholder, title, brand label, star rating with review count, price with optional original price strikethrough, discount badge, and an "Add to cart" button. Use shadcn/ui Card, Button, and Badge components and Tailwind CSS. Add hover image zoom and button reveal effects. Make it responsive for product grids.
Chinese Prompt
创建一个电商产品卡片。包含产品图片占位符、标题、品牌标签、星级评分和评论数、价格及可选的原价删除线、折扣徽章和 "Add to cart" 按钮。使用 shadcn/ui Card、Button 和 Badge 组件以及 Tailwind CSS。添加悬停图片缩放和按钮显示效果。使其适用于产品网格并响应式。
Overview
A conversion-focused product card for e-commerce grids. Displays key product info and a clear add-to-cart action.
Features
- Product image with hover zoom
- Title and brand
- Star rating and review count
- Sale price and strikethrough original price
- Discount badge
- Add to cart button
- Responsive grid sizing
Usage
Copy the prompt into v0 or Cursor. Use within a product listing grid.
Customization
Modify the prompt to:
- Add color/size swatches
- Show wishlist heart icon
- Add quick view modal trigger
- Display stock status badge