{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "items",
  "type": "registry:block",
  "title": "Items Section",
  "description": "A grid of items with icons and descriptions, perfect for features or benefits.",
  "files": [
    {
      "path": "components/sections/items/default.tsx",
      "content": "import {\n  BlocksIcon,\n  EclipseIcon,\n  FastForwardIcon,\n  LanguagesIcon,\n  MonitorSmartphoneIcon,\n  RocketIcon,\n  ScanFaceIcon,\n  SquarePenIcon,\n} from \"lucide-react\";\nimport { ReactNode } from \"react\";\n\nimport { Item, ItemDescription, ItemIcon, ItemTitle } from \"../../ui/item\";\nimport { Section } from \"../../ui/section\";\n\ninterface ItemProps {\n  title: string;\n  description: string;\n  icon: ReactNode;\n}\n\ninterface ItemsProps {\n  title?: string;\n  items?: ItemProps[] | false;\n  className?: string;\n}\n\nconst DEFAULT_ITEMS: ItemProps[] = [\n  {\n    title: \"Accessibility first\",\n    description: \"Fully WCAG 2.0 compliant, made with best a11y practices\",\n    icon: <ScanFaceIcon className=\"size-5 stroke-1\" />,\n  },\n  {\n    title: \"Responsive design\",\n    description: \"Looks and works great on any device and screen size\",\n    icon: <MonitorSmartphoneIcon className=\"size-5 stroke-1\" />,\n  },\n  {\n    title: \"Light and dark mode\",\n    description: \"Seamless switching between color schemes, 6 themes included\",\n    icon: <EclipseIcon className=\"size-5 stroke-1\" />,\n  },\n  {\n    title: \"Easy to customize\",\n    description: \"Flexible options to match your product or brand\",\n    icon: <BlocksIcon className=\"size-5 stroke-1\" />,\n  },\n  {\n    title: \"Top-level performance\",\n    description: \"Made for lightning-fast load times and smooth interactions\",\n    icon: <FastForwardIcon className=\"size-5 stroke-1\" />,\n  },\n  {\n    title: \"Production ready\",\n    description: \"Thoroughly tested and launch-prepared\",\n    icon: <RocketIcon className=\"size-5 stroke-1\" />,\n  },\n  {\n    title: \"Made for localization\",\n    description: \"Easy to implement support for multiple languages and regions\",\n    icon: <LanguagesIcon className=\"size-5 stroke-1\" />,\n  },\n  {\n    title: \"CMS friendly\",\n    description: \"Built to work with any headless content management system\",\n    icon: <SquarePenIcon className=\"size-5 stroke-1\" />,\n  },\n];\n\nexport default function Items({\n  title = \"Everything you need. Nothing you don't.\",\n  items = DEFAULT_ITEMS,\n  className,\n}: ItemsProps) {\n  return (\n    <Section className={className}>\n      <div className=\"max-w-container mx-auto flex flex-col items-center gap-6 sm:gap-20\">\n        <h2 className=\"max-w-[560px] text-center text-3xl leading-tight font-semibold sm:text-5xl sm:leading-tight\">\n          {title}\n        </h2>\n        {items !== false && items.length > 0 && (\n          <div className=\"grid auto-rows-fr grid-cols-2 gap-0 sm:grid-cols-3 sm:gap-4 lg:grid-cols-4\">\n            {items.map((item) => (\n              <Item key={item.title}>\n                <ItemTitle className=\"flex items-center gap-2\">\n                  <ItemIcon>{item.icon}</ItemIcon>\n                  {item.title}\n                </ItemTitle>\n                <ItemDescription>{item.description}</ItemDescription>\n              </Item>\n            ))}\n          </div>\n        )}\n      </div>\n    </Section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/sections/items/default.tsx"
    },
    {
      "path": "components/ui/item.tsx",
      "content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Item({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item\"\n      className={cn(\"text-foreground flex flex-col gap-4 p-4\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"h3\">) {\n  return (\n    <h3\n      data-slot=\"item-title\"\n      className={cn(\n        \"text-sm leading-none font-semibold tracking-tight sm:text-base\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-description\"\n      className={cn(\n        \"text-muted-foreground flex max-w-[240px] flex-col gap-2 text-sm text-balance\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ItemIcon({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-icon\"\n      className={cn(\"flex items-center self-start\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Item, ItemDescription, ItemIcon, ItemTitle };\n",
      "type": "registry:ui",
      "target": "components/ui/item.tsx"
    }
  ],
  "dependencies": [
    "@radix-ui/react-slot",
    "lucide-react"
  ]
}