CategoryGrid

2x3 grid of category cards with gradient backgrounds and item counts

E-commercecategoriesgridnavigation

Dependencies

shadcn/ui components needed:

npx shadcn@latest add cardnpx shadcn@latest add badge

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3import { Card, CardContent } from '@/components/ui/card';
4import { Badge } from '@/components/ui/badge';
5
6const categories = [
7  { name: 'Electronics', count: '1.2k items', gradient: 'from-purple-600 to-indigo-600' },
8  { name: 'Clothing', count: '856 items', gradient: 'from-rose-600 to-pink-600' },
9  { name: 'Home & Garden', count: '543 items', gradient: 'from-amber-600 to-orange-600' },
10  { name: 'Sports', count: '321 items', gradient: 'from-emerald-600 to-teal-600' },
11  { name: 'Books', count: '1.5k items', gradient: 'from-blue-600 to-cyan-600' },
12  { name: 'Toys', count: '267 items', gradient: 'from-orange-600 to-red-600' },
13];
14
15export default function CategoryGrid() {
16  return (
17    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 py-12 px-6">
18      <div className="container mx-auto max-w-6xl">
19        <h2 className="text-3xl font-bold text-white mb-8">Browse Categories</h2>
20        
21        <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
22          {categories.map((category, index) => (
23            <Card
24              key={index}
25              className="overflow-hidden group cursor-pointer hover:scale-105 transition-all duration-300"
26            >
27              <CardContent className="p-0 relative h-48">
28                <div className={'absolute inset-0 bg-gradient-to-br ' + category.gradient} />
29                <div className="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors" />
30                
31                <div className="absolute inset-0 flex flex-col justify-end p-4">
32                  <Badge className="absolute top-3 right-3 bg-white/20 backdrop-blur-sm text-white border-white/30 w-fit">
33                    {category.count}
34                  </Badge>
35                  <h3 className="text-white font-bold text-xl">{category.name}</h3>
36                </div>
37              </CardContent>
38            </Card>
39          ))}
40        </div>
41      </div>
42    </div>
43  );
44}