Premium

FilterSidebar

Vertical filter panel with brand checkboxes, size options, color dots, and price range

E-commercefiltersidebarsearch

Dependencies

shadcn/ui components needed:

npx shadcn@latest add cardnpx shadcn@latest add buttonnpx shadcn@latest add checkboxnpx shadcn@latest add label

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 { Button } from '@/components/ui/button';
4import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
5import { Checkbox } from '@/components/ui/checkbox';
6import { Label } from '@/components/ui/label';
7
8const brands = [
9  { name: 'Nike', count: 234 },
10  { name: 'Adidas', count: 189 },
11  { name: 'Puma', count: 156 },
12  { name: 'Reebok', count: 98 },
13];
14
15const sizes = ['XS', 'S', 'M', 'L', 'XL'];
16
17const colors = [
18  { name: 'black', class: 'bg-black' },
19  { name: 'white', class: 'bg-white border border-slate-300' },
20  { name: 'red', class: 'bg-red-500' },
21  { name: 'blue', class: 'bg-blue-500' },
22  { name: 'green', class: 'bg-green-500' },
23  { name: 'yellow', class: 'bg-yellow-500' },
24];
25
26export default function FilterSidebar() {
27  return (
28    <Card className="bg-gradient-to-br from-slate-900 to-slate-800 border-slate-700">
29      <CardHeader>
30        <CardTitle className="text-white">Filters</CardTitle>
31      </CardHeader>
32      
33      <CardContent className="space-y-6">
34        <div>
35          <h3 className="text-white font-semibold mb-3">Brand</h3>
36          <div className="space-y-2">
37            {brands.map((brand) => (
38              <div key={brand.name} className="flex items-center gap-3">
39                <Checkbox id={brand.name} className="border-slate-600" />
40                <Label htmlFor={brand.name} className="text-slate-300 flex-1">
41                  {brand.name}
42                </Label>
43                <span className="text-slate-500 text-sm">({brand.count})</span>
44              </div>
45            ))}
46          </div>
47        </div>
48        
49        <div>
50          <h3 className="text-white font-semibold mb-3">Size</h3>
51          <div className="flex flex-wrap gap-2">
52            {sizes.map((size) => (
53              <button
54                key={size}
55                className={
56                  'w-10 h-10 rounded-lg border-2 font-medium transition-all ' +
57                  (size === 'M'
58                    ? 'border-purple-500 bg-purple-500/20 text-white'
59                    : 'border-slate-700 text-slate-400 hover:border-slate-600')
60                }
61              >
62                {size}
63              </button>
64            ))}
65          </div>
66        </div>
67        
68        <div>
69          <h3 className="text-white font-semibold mb-3">Color</h3>
70          <div className="flex flex-wrap gap-2">
71            {colors.map((color) => (
72              <button
73                key={color.name}
74                className={'w-8 h-8 rounded-full ' + color.class}
75                title={color.name}
76              />
77            ))}
78          </div>
79        </div>
80        
81        <div>
82          <h3 className="text-white font-semibold mb-3">Price Range</h3>
83          <div className="space-y-3">
84            <div className="flex justify-between text-sm">
85              <span className="text-slate-400">$0</span>
86              <span className="text-white font-semibold">$0 - $500</span>
87              <span className="text-slate-400">$1000</span>
88            </div>
89            <div className="h-2 bg-slate-700 rounded-full overflow-hidden">
90              <div className="h-full w-1/2 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-full" />
91            </div>
92          </div>
93        </div>
94        
95        <div className="pt-4 space-y-2">
96          <Button className="w-full bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white">
97            Apply Filters
98          </Button>
99          <button className="w-full text-slate-400 hover:text-white text-sm">
100            Clear All
101          </button>
102        </div>
103      </CardContent>
104    </Card>
105  );
106}