# Product Listing Card 2

> A three-up product grid carrying image, name and price only

A shadcn/ui block from the [@shadcnstore](https://www.shadcnstore.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnstore/product-card-2).

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

## Install

```bash
npx shadcn@latest add https://shadcnstore.com/r/product-card-2.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`

## Files

### `storage/app/registry-sources/e-commerce/product-list/product-card-2/page.tsx`

```tsx
import { ProductCard2 } from "@/components/blocks/e-commerce/product-list/product-card-2/components/product-card-2"

export default function Page() {
  return (
    <div className="flex min-h-svh w-full items-center justify-center">
      <div className="w-full">
        <ProductCard2 />
      </div>
    </div>
  )
}
```

### `storage/app/registry-sources/e-commerce/product-list/product-card-2/product-card-2.tsx`

```tsx
import { Star } from 'lucide-react'
import { Card, CardContent, CardTitle } from '@/components/ui/card'
import { type Product, products } from "@/components/data/product-card-2-data"

export function ProductCard2() {
  return (
    <section className='py-12'>
      <div className='mx-auto w-full max-w-7xl flex flex-col gap-8 px-4 sm:px-6 lg:px-8'>
      <header className='flex flex-col gap-2'>
        <h2 className='text-3xl font-bold text-balance sm:text-4xl'>Popular Products</h2>
        <p className='text-muted-foreground max-w-[60ch] text-balance'>
          This beloved product has become a favorite among our customers for its exceptional features and unparalleled
          performance
        </p>
      </header>

      <div className='grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3'>
        {products.map(product => (
          <Card key={product.id} className='group overflow-hidden transition-all hover:shadow-lg'>
            <CardContent className='flex flex-col gap-4'>
              <div className='overflow-hidden rounded-md'>
                <img
                  src={product.image}
                  alt={product.title}
                  width={400}
                  height={400}
                  className='aspect-square w-full object-cover transition-transform duration-300 group-hover:scale-105'
                />
              </div>

              <div className='flex flex-col gap-2'>
                <CardTitle className='line-clamp-1 text-lg font-semibold text-balance sm:text-xl'>
                  {product.title}
                </CardTitle>

                <div className='flex items-center gap-0.5' aria-label={`${product.rating} out of 5 stars`} role='img'>
                  {Array.from({ length: product.rating }).map((_, i) => (
                    <Star key={i} className='fill-foreground text-foreground size-4 sm:size-5' />
                  ))}
                </div>

                <p className='text-lg font-semibold sm:text-xl'>${product.price.toFixed(2)}</p>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
    </section>
  )
}

export default ProductCard2
```

### `storage/app/registry-sources/e-commerce/product-list/product-card-2/product-card-2-data.ts`

```ts
export interface Product {
  id: number
  title: string
  image: string
  price: number
  rating: number
}

export const products: Product[] = [
  {
    id: 1,
    title: 'Eclax Semispherical',
    image: 'https://assets.shadcnstore.com/shadcnstore.com/stock/e-commerce/eclax-semispherical.600w.fa53b6.avif',
    price: 399,
    rating: 5,
  },
  {
    id: 2,
    title: 'Eclax Cone',
    image: 'https://assets.shadcnstore.com/shadcnstore.com/stock/e-commerce/eclax-cone.600w.ffc5c7.avif',
    price: 399,
    rating: 4,
  },
  {
    id: 3,
    title: 'Eclax Cage Pack',
    image: 'https://assets.shadcnstore.com/shadcnstore.com/stock/e-commerce/eclax-cage-pack.600w.03040e.avif',
    price: 399,
    rating: 5,
  },
]
```