ProductCard

ProductCard combines product imagery, badges, rating, pricing, favorite state, and cart actions.

Live Editor

function ProductCardExample() {
  const [favorite, setFavorite] = React.useState(false);

  return (
    <div className="w-full max-w-xs">
      <ProductCard
        id="serum-01"
        name="Niom Hydrating Face Serum"
        image={Stock}
        price={36}
        originalPrice={40}
        discount={10}
        rating={4.5}
        reviewCount={128}
        badge="New"
        favorite={favorite}
        onFavorite={() => setFavorite((current) => !current)}
        onAddToCart={() => window.alert("Added to cart")}
      />
    </div>
  );
}

Result

Loading...

import { ProductCard } from "niom-parts";

<ProductCard
  id="serum-01"
  name="Niom Hydrating Face Serum"
  image="/products/serum.jpg"
  price={36}
  originalPrice={40}
  discount={10}
  rating={4.5}
  reviewCount={128}
  onAddToCart={addToCart}
/>

Common use cases

ProductCard can communicate discounts, favorite state, and stock availability while keeping card and action clicks separate.

Live Editor

function ProductCardUseCases() {
  const [favorite, setFavorite] = React.useState(true);

  return (
    <div className="grid w-full max-w-2xl grid-cols-1 gap-5 sm:grid-cols-2">
      <ProductCard
        id="sale-item"
        name="Vitamin C Serum"
        image={Stock}
        price={28}
        originalPrice={40}
        discount={30}
        badge="Sale"
        rating={4.8}
        reviewCount={64}
        favorite={favorite}
        onFavorite={() => setFavorite((current) => !current)}
      />
      <ProductCard
        id="sold-out-item"
        name="Night Repair Cream"
        image={Stock}
        price={45}
        badge="Sold out"
        inStock={false}
        rating={4.2}
        reviewCount={31}
      />
    </div>
  );
}

Result

Loading...

Props

Prop	Type	Default
id	string	required
name	string	required
price	number	required
image	string	bundled fallback
originalPrice	number	-
discount	number	-
rating	number	4.5
reviewCount	number	0
inStock	boolean	true
countdown	Date	-
badge	ReactNode	-
favorite	boolean	false
onClick	() => void	-
onFavorite	() => void	-
onAddToCart	() => void	-
className	string	-