# Card 01 - Product Card

> Display products with weekly sales, new users, & purchased orders in a clean card layout. Suitable for ecommerce stores, product catalogs, and marketplace dashboards.

A shadcn/ui block from the [@shadcn-dashboard](https://shadcndashboard.dev) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-dashboard/product-card).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-dashboard/product-card
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-dashboard/product-card-light-c598460e0539516f.png
- Registry item: https://shadcndashboard.dev/r/product-card.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcndashboard.dev/r/product-card.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `card`, `badge`, `button`

## Files

### `src/components/shadcn-dashboard/blocks/cards/product-card.tsx`

```tsx
"use client";
import { Handbag, Users, Box, Icon } from "lucide-react";
import {
  Card,
  CardHeader,
  CardTitle,
  CardAction,
  CardContent,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { ArrowRight } from "lucide-react";
import { cn } from "@/lib/utils";

 const ProductsData = [
    {
      id: 1,
      title: 'Weekly sales',
      amount: '714k',
      growthPercentage: '40%',
      badgeColor: "!bg-chart-2/10" ,
      badgetxtcolor: "!text-chart-2",
      icon: Handbag,

    },
    {
      id: 2,
      title: 'New users',
      amount: '1.35m',
      growthPercentage: '20%',
      badgeColor: "!bg-rose-600/10" ,
      badgetxtcolor: "!text-rose-600",
      icon: Users,

    },
    {
      id:3,
      title: 'Purchase Orders',
      amount: '1.72m',
      growthPercentage: '40%',
      badgeColor: "!bg-chart-2/10" ,
      badgetxtcolor: '!text-chart-2',
      icon: Box,

    },
  ]
const ProductCardCode = () => {
  return (
    <div className="w-full">
      <Card className="py-0!">
      <div className="grid grid-cols-12">
        {ProductsData.map((product) => (
          <div
            className="lg:col-span-4 col-span-12 lg:border-e lg:border-b-0  md:border-b md:border-r-0 max-md:border-b  border-border last:border-0 flex flex-wrap flex-col justify-between gap-4 py-4"
            key={product.id}
          >
              <CardHeader>
                <CardTitle>
                  <h4 className="text-sm font-normal">{product.title}</h4>
                </CardTitle>
                <CardAction>
                  <div className={`p-3 rounded-md outline`}>
                    <product.icon size={16} />
                  </div>
                </CardAction>
                <div className="flex items-center gap-2">
                  <h3 className="text-2xl font-semibold">{product.amount}</h3>
                
               <Badge  className={cn(product.badgeColor ,product.badgetxtcolor, "font-normal")}>{product.growthPercentage}</Badge> 

                </div>
              </CardHeader>
              <CardContent>
                <Button
                  variant={"outline"}
                  className={
                    "flex items-center gap-1.5 w-fit cursor-pointer"
                  }
                >
                  <span>See Statistics</span>
                  <ArrowRight size={16} />
                </Button>
              </CardContent>
          </div>
        ))}
      </div>
        </Card>
    </div>

  
  );
};
export default ProductCardCode;
```