# Product Listing Card 1

> A deals grid of product cards with an add-to-cart action on each

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

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

## Install

```bash
npx shadcn@latest add https://shadcnstore.com/r/product-card-1.json
```

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

## Dependencies

- Registry items: `button`, `card`

## Files

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

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

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

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

```tsx
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardFooter } from '@/components/ui/card'
import { products } from "@/components/data/product-card-1-data"

const MAX_ITEMS = 6

export function ProductCard1() {
  const displayedProducts = products.slice(0, MAX_ITEMS)

  return (
    <section className='py-12'>
      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
      <h2 className='mb-8 text-center text-2xl font-bold text-balance md:text-3xl'>Today's Best Deals For You!</h2>

      <div className='grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:gap-6 xl:grid-cols-6'>
        {displayedProducts.map(product => (
          <Card
            key={product.id}
            className='flex flex-col gap-4 overflow-hidden rounded-lg py-4 shadow-none transition-shadow duration-300 hover:shadow-md'
          >
            <CardContent className='flex flex-1 flex-col gap-4 px-4 '>
              {/* Image container - Heart button removed */}
              <div className='aspect-square overflow-hidden rounded-md'>
                <img
                  src={product.image}
                  alt={product.title}
                  className='size-full rounded-md object-contain dark:brightness-[0.95] dark:invert'
                  loading='lazy'
                  width={400}
                  height={400}
                />
              </div>

              <div className='flex flex-1 flex-col'>
                <h2 className='mb-1 font-medium text-balance'>{product.title}</h2>
                <div className='mt-auto flex items-baseline gap-2'>
                  <p className='font-semibold'>${product.price.toFixed(2)}</p>
                  {product.originalPrice && (
                    <p className='text-muted-foreground text-sm line-through md:text-base xl:text-sm 2xl:text-base'>
                      ${product.originalPrice.toFixed(2)}
                    </p>
                  )}
                </div>
              </div>
            </CardContent>

            <CardFooter className='px-3 md:px-4 pt-0 bg-transparent border-t-0'>
              <Button variant='outline' size='sm' className="h-8 px-3 text-xs w-full cursor-pointer text-sm">
                Add to Cart
              </Button>
            </CardFooter>
          </Card>
        ))}
      </div>
    </div>
    </section>
  )
}

export default ProductCard1
```

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

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

export const products: Product[] = [
  {
    id: 1,
    title: 'Wireless Headphones',
    description: 'Premium noise-cancelling experience',
    price: 349.0,
    originalPrice: 399.0,
    rating: 5,
    reviews: 121,
    image: 'https://ui.shadcn.com/placeholder.svg',
  },
  {
    id: 2,
    title: 'Smart Watch',
    description: 'Health and fitness companion',
    price: 399.0,
    originalPrice: 449.0,
    rating: 5,
    reviews: 156,
    image: 'https://ui.shadcn.com/placeholder.svg',
  },
  {
    id: 3,
    title: 'Laptop Pro',
    description: 'Power and performance redefined',
    price: 1299.0,
    originalPrice: 1499.0,
    rating: 5,
    reviews: 89,
    image: 'https://ui.shadcn.com/placeholder.svg',
  },
  {
    id: 4,
    title: 'RGB Keyboard',
    description: 'Mechanical RGB backlit keyboard',
    price: 159.0,
    originalPrice: 199.0,
    rating: 5,
    reviews: 92,
    image: 'https://ui.shadcn.com/placeholder.svg',
  },
  {
    id: 5,
    title: 'Gaming Monitor',
    description: '144Hz refresh rate display',
    price: 699.0,
    originalPrice: 799.0,
    rating: 5,
    reviews: 78,
    image: 'https://ui.shadcn.com/placeholder.svg',
  },
  {
    id: 6,
    title: 'Smartphone Pro',
    description: 'Pro camera system, ProMotion',
    price: 999.0,
    originalPrice: 1099.0,
    rating: 5,
    reviews: 245,
    image: 'https://ui.shadcn.com/placeholder.svg',
  },
]
```