{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "category-filters",
  "type": "registry:component",
  "title": "Category Filters",
  "author": "Toby Belhome",
  "description": "Enable shoppers to quickly find products with Tailwind CSS category filter sections. These layouts provide checkboxes, dropdowns, and tags to refine searches, improving usability and product discovery. Perfect for online stores and marketplaces aiming for modern, efficient, and user-friendly shopping experiences.",
  "dependencies": [],
  "registryDependencies": [
    "button",
    "label",
    "slider",
    "input",
    "radio-group",
    "checkbox",
    "badge"
  ],
  "files": [
    {
      "path": "examples/blocks/ecommerce/category-filters/01/page.tsx",
      "content": "\"use client\";\n\nimport Link from \"next/link\";\nimport Image from \"next/image\";\nimport { useState } from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Label } from \"@/components/ui/label\";\nimport { Slider } from \"@/components/ui/slider\";\nimport { Input } from \"@/components/ui/input\";\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\";\nimport { cn } from \"@/lib/utils\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue\n} from \"@/components/ui/select\";\nimport { Badge } from \"@/components/ui/badge\";\n\nconst products = [\n  {\n    title: \"White T-Shirt\",\n    image: \"/images/products/list1.png\",\n    price: \"$29.00\"\n  },\n  {\n    title: \"White T-Shirt\",\n    image: \"/images/products/list2.png\",\n    price: \"$29.00\"\n  },\n  {\n    title: \"White T-Shirt\",\n    image: \"/images/products/list3.png\",\n    price: \"$29.00\"\n  },\n  {\n    title: \"White T-Shirt\",\n    image: \"/images/products/list4.png\",\n    price: \"$29.00\"\n  },\n  {\n    title: \"White T-Shirt\",\n    image: \"/images/products/list5.png\",\n    price: \"$29.00\"\n  },\n  {\n    title: \"White T-Shirt\",\n    image: \"/images/products/list6.png\",\n    price: \"$29.00\"\n  }\n];\n\nexport type Product = (typeof products)[number];\n\nconst colorFilters = [\n  {\n    name: \"Blue\",\n    classNames:\n      \"border-blue-500 bg-blue-500 shadow-none data-[state=checked]:border-blue-500 data-[state=checked]:bg-blue-500\"\n  },\n  {\n    name: \"Pink\",\n    classNames:\n      \"border-pink-500 bg-pink-500 shadow-none data-[state=checked]:border-pink-500 data-[state=checked]:bg-pink-500\"\n  },\n  {\n    name: \"Red\",\n    classNames:\n      \"border-red-500 bg-red-500 shadow-none data-[state=checked]:border-red-500 data-[state=checked]:bg-red-500\"\n  },\n  {\n    name: \"Orange\",\n    classNames:\n      \"border-amber-500 bg-amber-500 shadow-none data-[state=checked]:border-amber-500 data-[state=checked]:bg-amber-500\"\n  },\n  {\n    name: \"Green\",\n    classNames:\n      \"border-emerald-500 bg-emerald-500 shadow-none data-[state=checked]:border-emerald-500 data-[state=checked]:bg-emerald-500\"\n  }\n];\n\nconst categories = [\n  { name: \"T-Shirts\" },\n  { name: \"Hoodies\" },\n  { name: \"Jackets\" },\n  { name: \"Accessories\" },\n  { name: \"Sweaters\" },\n  { name: \"Shorts\" },\n  { name: \"Bags\" }\n];\n\nconst sizes = [{ name: \"SM\" }, { name: \"LG\" }, { name: \"XL\" }, { name: \"XXL\" }];\n\nconst sortFilters = [\n  { key: \"featured\", name: \"Featured\" },\n  { key: \"best_selling\", name: \"Best Selling\" },\n  { key: \"price_low_high\", name: \"Price: Low to High\" },\n  { key: \"price_high_low\", name: \"Price: High to Low\" },\n  { key: \"newest\", name: \"Newest Arrivals\" },\n  { key: \"rating\", name: \"Customer Rating\" },\n  { key: \"discount\", name: \"Discount: High to Low\" }\n];\n\nexport default function Page() {\n  const min_price = 5;\n  const max_price = 1240;\n  const [value, setValue] = useState([min_price, max_price]);\n\n  const formatPrice = (price: number) => {\n    return price === max_price ? `$${price.toLocaleString()}+` : `$${price.toLocaleString()}`;\n  };\n\n  return (\n    <section className=\"py-10 lg:py-20\">\n      <div className=\"container mx-auto px-4\">\n        <div className=\"grid grid-cols-[240px_1fr] gap-8\">\n          <div></div>\n          <header className=\"mb-6 flex items-center justify-between space-y-2\">\n            <h2 className=\"font-heading text-2xl lg:text-3xl\">New Season Products</h2>\n            <Select defaultValue={sortFilters[0].key}>\n              <SelectTrigger>\n                <span className=\"text-muted-foreground text-sm\">Sort by</span>\n                <SelectValue placeholder=\"Sort\" />\n              </SelectTrigger>\n              <SelectContent className=\"[&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2\">\n                {sortFilters.map((item, i) => (\n                  <SelectItem key={item.key} value={item.key}>\n                    {item.name}\n                  </SelectItem>\n                ))}\n              </SelectContent>\n            </Select>\n          </header>\n        </div>\n        <div className=\"grid grid-cols-[240px_1fr] gap-8\">\n          <div className=\"space-y-10\">\n            {/* Filter group */}\n            <div className=\"space-y-4\">\n              <div className=\"text-muted-foreground flex justify-between text-[11px] font-semibold tracking-widest uppercase\">\n                Keywords\n              </div>\n              <Input type=\"text\" placeholder=\"Search...\" />\n            </div>\n\n            {/* Filter group */}\n            <div className=\"space-y-4\">\n              <div className=\"text-muted-foreground flex justify-between text-sm\">\n                <span className=\"text-muted-foreground flex justify-between text-[11px] font-semibold tracking-widest uppercase\">\n                  Price\n                </span>\n\n                <Label className=\"text-xs\">\n                  From {formatPrice(value[0])} to {formatPrice(value[1])}\n                </Label>\n              </div>\n              <div className=\"*:not-first:mt-3\">\n                <Slider\n                  value={value}\n                  onValueChange={setValue}\n                  min={min_price}\n                  max={max_price}\n                  aria-label=\"Price range slider\"\n                />\n              </div>\n            </div>\n\n            {/* Filter group */}\n            <div className=\"space-y-4\">\n              <div className=\"text-muted-foreground flex justify-between text-[11px] font-semibold tracking-widest uppercase\">\n                Categories\n              </div>\n              <div className=\"space-y-3\">\n                {categories.map((item, i) => (\n                  <div className=\"flex items-center gap-2\">\n                    <Checkbox id={`category-${i}`} />\n                    <Label htmlFor={`category-${i}`} className=\"text-muted-foreground\">\n                      {item.name}\n                    </Label>\n                  </div>\n                ))}\n              </div>\n            </div>\n\n            {/* Filter group */}\n            <div className=\"space-y-4\">\n              <div className=\"text-muted-foreground flex justify-between text-[11px] font-semibold tracking-widest uppercase\">\n                Colours\n              </div>\n              <fieldset>\n                <RadioGroup className=\"flex flex-col gap-3\" defaultValue=\"Blue\">\n                  {colorFilters.map((item, i) => (\n                    <div className=\"flex items-center gap-2\">\n                      <RadioGroupItem\n                        id={`color-${i}`}\n                        value={item.name}\n                        aria-label=\"Blue\"\n                        className={cn(\"size-4\", item.classNames)}\n                      />\n                      <Label htmlFor={`color-${i}`} className=\"text-muted-foreground\">\n                        {item.name}\n                      </Label>\n                    </div>\n                  ))}\n                </RadioGroup>\n              </fieldset>\n            </div>\n\n            {/* Filter group */}\n            <div className=\"space-y-4\">\n              <div className=\"text-muted-foreground flex justify-between text-[11px] font-semibold tracking-widest uppercase\">\n                Sizes\n              </div>\n              <div className=\"space-y-3\">\n                {sizes.map((item, i) => (\n                  <div className=\"flex items-center gap-2\">\n                    <Checkbox id={`size-${i}`} />\n                    <Label htmlFor={`size-${i}`} className=\"text-muted-foreground\">\n                      {item.name}\n                    </Label>\n                  </div>\n                ))}\n              </div>\n            </div>\n          </div>\n          <div>\n            <div className=\"grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 lg:gap-6\">\n              {products.map((product, i) => (\n                <Product key={i} product={product} />\n              ))}\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n\nconst Product = ({ product }: { product: Product }) => (\n  <Link href=\"#\" className=\"group\">\n    <figure className=\"relative aspect-9/16 w-full overflow-hidden object-cover\">\n      <Image\n        fill\n        className=\"object-cover transition-transform duration-300 group-hover:scale-105 group-hover:rotate-2\"\n        src={product.image}\n        alt={product.title}\n      />\n    </figure>\n    <div className=\"mt-3 space-y-0.5\">\n      <p className=\"font-medium\">{product.title}</p>\n      <p className=\"text-muted-foreground\">{product.price}</p>\n    </div>\n  </Link>\n);\n",
      "type": "registry:component",
      "target": "components/category-filters.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}