# Product Category Card 1

> A four-up category grid of subjects with a view-all action

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

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

## Install

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

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

## Files

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

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

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

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

```tsx
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { cn } from '@/lib/utils'
import {
  ArrowRight,
  BarChart3,
  Code2,
  Languages,
  Lightbulb,
  MonitorSmartphone,
  Network,
  Pencil,
  Search,
  X,
} from 'lucide-react'
import { categories } from "@/components/data/product-category-1-data"

const categoryIcons = {
  MonitorSmartphone,
  Languages,
  BarChart3,
  Network,
  Code2,
  Search,
  Lightbulb,
  Pencil,
} as const

export function ProductCategory1({ className }: { className?: string }) {
  return (
    <section className={cn('relative w-full py-12 md:py-16 lg:py-20', className)}>
      <div className='relative z-10 mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
        <header className='mx-auto mb-12 max-w-5xl'>
          <div className='flex flex-col items-center justify-between gap-6 md:flex-row md:items-start md:text-start'>
            <div className='flex flex-col gap-4 items-center md:items-start text-center md:text-start'>
              <div className='inline-flex'>
                <span className='bg-secondary/80 text-secondary-foreground rounded-full px-4 py-1.5 text-sm font-medium'>
                  Course List
                </span>
              </div>
              <div className='flex flex-col gap-2'>
                <h2 className='text-foreground text-3xl font-bold tracking-tight md:text-4xl'>Popular Courses</h2>
                <p className='text-muted-foreground max-w-2xl'>
                  Explore our wide range of courses designed to help you achieve your learning goals.
                </p>
              </div>
            </div>
            <Button className="h-10 px-4 cursor-pointer whitespace-nowrap" size='lg'>
              View All Courses
              <ArrowRight />
            </Button>
          </div>
        </header>

        <div className='mx-auto grid max-w-5xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4'>
          {categories.map(category => {
            const Icon = categoryIcons[category.icon] ?? X
            return (
              <Card
                key={category.id}
                className='group relative overflow-hidden shadow-xs transition-all hover:shadow-md py-6 px-2'
              >
                <CardContent>
                  <div className='flex flex-col gap-4'>
                    <div className='bg-secondary/80 text-secondary-foreground flex size-12 items-center justify-center rounded-lg'>
                      <Icon className='size-5' strokeWidth={1.5} />
                    </div>
                    <div>
                      <h3 className='text-foreground text-lg font-semibold'>{category.name}</h3>
                      <p className='text-muted-foreground text-sm'>{category.courses}</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            )
          })}
        </div>
      </div>
    </section>
  )
}

export default ProductCategory1
```

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

```ts
export interface Category {
  id: string
  name: string
  courses: string
  icon: 'MonitorSmartphone' | 'Languages' | 'BarChart3' | 'Network' | 'Code2' | 'Search' | 'Lightbulb' | 'Pencil'
}

export const categories: readonly Category[] = [
  { id: '1', name: 'Featured', courses: '03 Courses', icon: 'MonitorSmartphone' },
  { id: '2', name: 'Language', courses: '04 Courses', icon: 'Languages' },
  { id: '3', name: 'Marketing', courses: '04 Courses', icon: 'BarChart3' },
  { id: '4', name: 'Networking', courses: '02 Courses', icon: 'Network' },
  { id: '5', name: 'Programming', courses: '01 Course', icon: 'Code2' },
  { id: '6', name: 'SEO', courses: '03 Courses', icon: 'Search' },
  { id: '7', name: 'Technology', courses: '03 Courses', icon: 'Lightbulb' },
  { id: '8', name: 'UI/UX Design', courses: '02 Courses', icon: 'Pencil' },
]
```