Lucent UI
← ConfirmationDialogProductCardAnnouncementCard →
✦ LLM-ready

ProductCard

pattern

Product card layout with image media slot, title, description, price, and CTA button. Includes article and team member variants. Composes Card, Stack, Row, Text, Chip, Avatar, and Button.

"Build a ProductCard pattern from lucent-ui with Card media slot, title, description, price, and CTA. Include a Chip badge for labels like 'New' or 'Sale'."

Usage

React / JSX
import { Card, Stack, Row, Text, Chip, Avatar, Button } from 'lucent-ui'

<ProductCard />

Installation

pnpm add lucent-ui

API Reference

ProductCard props — * required

PropTypeDefaultDescription
Cardcomponent—Surface container with media slot for the product image.
Textcomponent—Product title, description, and price.
Chipcomponent—Label badge (New, Sale, Sold out).
Buttoncomponent—CTA button (Add to cart, View details).
Avatarcomponent—Author/team member photo in article and team variants.
Stackcomponent—Vertical layout inside the card.
Rowcomponent—Horizontal layout for price/CTA and metadata rows.