# Card 06 - Latest Products Card

> List recently added products with thumbnail, name, buyer count, and price inside a scrollable card. Useful for ecommerce dashboards tracking new product activity.

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

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

## Install

```bash
npx shadcn@latest add https://shadcndashboard.dev/r/latest-products-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`, `scroll-area`

## Files

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

```tsx
"use client";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Box } from "lucide-react";


export default function LatestProducts() {
  interface product {
    id: string;
    img: string;
    productName: string;
    value: string;
  }

  const latestProducts: product[] = [
    {
      id: "1",
      img: "https://images.shadcnspace.com/assets/shadcn-dashboard/dashboard-shell/wirelessPad.webp",
      productName: "Wireless Charging Pad",
      value: "$75.00",
    },
    {
      id: "2",
      img: "https://images.shadcnspace.com/assets/shadcn-dashboard/dashboard-shell/ergonomic.webp",
      productName: "Ergonomic Office Chair",
      value: "$350.00",
    },
    {
      id: "3",
      img: "https://images.shadcnspace.com/assets/shadcn-dashboard/dashboard-shell/smartHome.webp",
      productName: "Smart Home Camera",
      value: "$180.00",
    },
    {
      id: "4",
      img: "https://images.shadcnspace.com/assets/shadcn-dashboard/dashboard-shell/bluetooth.webp",
      productName: "Bluetooth Soundbar",
      value: "$200.00",
    },
    {
      id: "5",
      img: "https://images.shadcnspace.com/assets/shadcn-dashboard/dashboard-shell/ergonomic.webp",
      productName: "Ergonomic Office Chair",
      value: "$350.00",
    },
    {
      id: "6",
      img: "https://images.shadcnspace.com/assets/shadcn-dashboard/dashboard-shell/smartHome.webp",
      productName: "Smart Home Camera",
      value: "$180.00",
    },
  ];

  return (
    <div className="w-full max-w-lg">
    <Card className="gap-0!">
      <CardHeader className="border-b border-border  flex flex-row items-center justify-between shrink-0">
        <div className="flex items-center gap-2">
          <Box size={16} className="text-muted-foreground" />
          <span className="text-sm font-medium text-foreground">
            Latest Products
          </span>
        </div>
      </CardHeader>
      <CardContent className="flex flex-col px-0!">
        <ScrollArea className="h-84.75">
          {latestProducts.map((product) => (
            <div
              key={product.id}
              className="p-4 flex items-center justify-between border-b border-border  last:border-b-0 last:pb-0"
            >
              <div className="flex items-center gap-3">
                <img
                  src={product.img}
                  alt="product_image"
                  className="w-10 h-10 rounded-sm"
                />
                <div className="flex flex-col">
                  <h6 className="text-base font-medium">{product.productName}</h6>
                  <p className="text-sm font-normal text-muted-foreground">8.49k users</p>
                </div>
              </div>
              <p className="text-sm font-medium text-foreground">
                {product.value}
              </p>
            </div>
          ))}
        </ScrollArea>
      </CardContent>
    </Card>
    </div>
  );
}
```