opendraft

Components/Product Card

Product CardNew

Product card and responsive grid with price, compare-at price, text badges, rating slot and an out-of-stock state.

Open in Claude Open in ChatGPT

Apparel store

  • Linen overshirt, product photo
    Sale

    Sand, 6 sizes

    Rated 4.6 out of 5, (128)

    Now£89.00Was£120.00

  • Wool crew sweater, product photo
    New

    Charcoal

    Rated 4.8 out of 5, (41)

    £110.00

  • Canvas tote, product photo
    Out of stock

    One size

    Rated 4.2 out of 5, (9)

    £38.00

  • Selvedge jeans, product photo

    Indigo, straight

    Rated 4.7 out of 5, (76)

    £145.00

Electronics

  • Noise-cancelling headphones
    SaleFree shipping

    Noise-cancelling headphones

    40 h battery

    Rated 4.5 out of 5, (2310)

    Now$249.99Was$299.99

  • 27-inch 4K monitor
    New

    27-inch 4K monitor

    USB-C, 60 W

    Rated 4.4 out of 5, (318)

    $429.00

  • Mechanical keyboard
    Sold out

    Mechanical keyboard

    Hot-swap switches

    Rated 4.9 out of 5, (87)

    $129.00

Empty

No results

Try fewer filters.

Press Add or a title.

Installation

$npx shadcn@latest add @opendraft/product-card

Needs the @opendraft registry in your components.json. See Installation.

Dependencies

Source

The files the install command adds to your project. They're yours to edit.

PreviousSeat MapNext Image Gallery