# Product Category Card 2

> Image-based category cards with overlay text and trending badges

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

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

## Install

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

## Files

### `storage/app/registry-sources/e-commerce/product-categories/product-category-2/page.tsx`

```tsx
import { ProductCategory2 } from "@/components/blocks/e-commerce/product-categories/product-category-2/components/product-category-2"

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

### `storage/app/registry-sources/e-commerce/product-categories/product-category-2/product-category-2.tsx`

```tsx
import { Card } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { ArrowRight, ShoppingBag } from 'lucide-react'
import { categories } from "@/components/data/product-category-2-data"

export function ProductCategory2() {
  return (
    <section className='py-12'>
      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
        {/* Header */}
        <div className='mb-12 text-center'>
          <h2 className='text-3xl font-bold tracking-tight text-balance'>Shop by Category</h2>
          <p className='text-muted-foreground mt-4 text-lg'>Discover products across our most popular categories</p>
        </div>

        {/* Categories Grid */}
        <div className='grid gap-6 sm:grid-cols-2 lg:grid-cols-3'>
          {categories.map(category => (
            <Card
              key={category.id}
              className='group cursor-pointer overflow-hidden py-0 transition-all duration-500 hover:shadow-lg'
            >
              <div className='relative aspect-[5/4] overflow-hidden'>
                <img
                  src={category.image}
                  alt={category.name}
                  className='size-full object-cover transition-transform duration-500 group-hover:scale-105'
                />
                <div className='absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent' />

                {/* Trending Badge */}
                {category.trending ? <Badge className="px-2.5 py-0.5 font-semibold absolute rounded-sm top-4 left-4">Trending</Badge> : null}

                {/* Category Info Overlay */}
                <div className='absolute right-0 bottom-0 left-0 p-6 text-white'>
                  <h3 className='mb-1 text-xl font-bold'>{category.name}</h3>
                  <p className='mb-3 text-sm text-white/90'>{category.description}</p>
                  <div className='flex items-center justify-between'>
                    <span className='text-sm'>{category.itemCount.toLocaleString()} items</span>
                    <Button
                      size='sm'
                      variant='secondary'
                      className="h-8 px-3 text-xs cursor-pointer border-white/30 bg-white/20 text-white backdrop-blur-sm hover:bg-white/30"
                    >
                      Browse
                      <ArrowRight />
                    </Button>
                  </div>
                </div>
              </div>
            </Card>
          ))}
        </div>

        {/* Call to Action */}
        <div className='mt-12 text-center'>
          <Button size='lg' className="h-10 px-4 cursor-pointer gap-2">
            <ShoppingBag className='size-5' />
            View All Categories
          </Button>
        </div>
      </div>
    </section>
  )
}


export default ProductCategory2
```

### `storage/app/registry-sources/e-commerce/product-categories/product-category-2/product-category-2-data.ts`

```ts
export interface Category {
  id: number
  name: string
  description: string
  itemCount: number
  image: string
  trending: boolean
}

export const categories: Category[] = [
  {
    id: 1,
    name: 'Electronics',
    description: 'Laptops, phones, and gadgets',
    itemCount: 1248,
    image: 'https://assets.shadcnstore.com/shadcnstore.com/stock/e-commerce/electronics.500w.a09f97.avif',
    trending: true,
  },
  {
    id: 2,
    name: 'Fashion',
    description: 'Clothing, shoes, and accessories',
    itemCount: 2156,
    image: 'https://assets.shadcnstore.com/shadcnstore.com/stock/e-commerce/fashion-store-interior.500w.0f92c5.avif',
    trending: false,
  },
  {
    id: 3,
    name: 'Home & Garden',
    description: 'Furniture, decor, and tools',
    itemCount: 892,
    image: 'https://assets.shadcnstore.com/shadcnstore.com/stock/e-commerce/home-garden.500w.c2cb32.avif',
    trending: false,
  },
  {
    id: 4,
    name: 'Sports & Outdoors',
    description: 'Fitness, camping, and recreation',
    itemCount: 674,
    image: 'https://assets.shadcnstore.com/shadcnstore.com/stock/e-commerce/sports-outdoors.500w.346909.avif',
    trending: true,
  },
  {
    id: 5,
    name: 'Books & Media',
    description: 'Books, music, and entertainment',
    itemCount: 1567,
    image: 'https://assets.shadcnstore.com/shadcnstore.com/stock/e-commerce/books-media.500w.492201.avif',
    trending: false,
  },
  {
    id: 6,
    name: 'Health & Beauty',
    description: 'Skincare, cosmetics, and wellness',
    itemCount: 743,
    image: 'https://assets.shadcnstore.com/shadcnstore.com/stock/e-commerce/health-beauty.500w.e876e5.avif',
    trending: true,
  },
]
```