{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "features-2",
  "title": "Features 2: numbered icon grid",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "Six features in a hairline grid of numbered cells with an icon, title and one sentence each. Pass your own features array.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/blocks/features-2/features-2.tsx",
      "content": "// Ballmac UI: Features 2. https://ui.ballmac.com/blocks/features-2\nimport * as React from \"react\"\nimport { Accessibility, Boxes, Code2, Moon, Palette, Terminal } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Feature = { icon: React.ComponentType<{ className?: string }>; title: string; body: string }\n\ntype Features2Props = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** Mono label above the heading. */\n  eyebrow?: string\n  /** Section heading. */\n  title?: string\n  /** The features, three per row on desktop. */\n  features?: Feature[]\n}\n\nconst defaults: Feature[] = [\n  { icon: Terminal, title: \"One-command setup\", body: \"Install with your package manager of choice. No config files to write.\" },\n  { icon: Code2, title: \"Typed end to end\", body: \"Every API is typed, so your editor catches mistakes before your users do.\" },\n  { icon: Accessibility, title: \"Accessible by default\", body: \"Keyboard support, focus management and ARIA are built in, not bolted on.\" },\n  { icon: Palette, title: \"Themeable\", body: \"Change a few CSS variables and everything follows your brand.\" },\n  { icon: Moon, title: \"Dark mode\", body: \"Designed for both themes from the start, not inverted after the fact.\" },\n  { icon: Boxes, title: \"Composable\", body: \"Small parts that combine, instead of one component with fifty props.\" },\n]\n\nfunction Features2({ eyebrow = \"Why teams switch\", title = \"Built for the way you already work.\", features = defaults, className, ...props }: Features2Props) {\n  return (\n    <section data-slot=\"features-2\" className={cn(\"mx-auto max-w-6xl px-4 py-20 sm:px-6 md:py-28\", className)} {...props}>\n      <div className=\"max-w-2xl\">\n        <p className=\"font-mono text-xs tracking-[0.16em] text-muted-foreground uppercase\">{eyebrow}</p>\n        <h2 className=\"mt-4 text-3xl font-semibold tracking-[-0.035em] text-balance sm:text-4xl\">{title}</h2>\n      </div>\n      <ul className=\"mt-12 grid gap-px overflow-hidden rounded-2xl border bg-border sm:grid-cols-2 lg:grid-cols-3\">\n        {features.map((f, i) => (\n          <li key={f.title} className=\"bg-background p-7\">\n            <div className=\"flex items-center justify-between\">\n              <f.icon className=\"size-5\" aria-hidden=\"true\" />\n              <span className=\"font-mono text-xs text-muted-foreground tabular-nums\">{String(i + 1).padStart(2, \"0\")}</span>\n            </div>\n            <h3 className=\"mt-6 font-semibold tracking-tight\">{f.title}</h3>\n            <p className=\"mt-2 text-sm leading-relaxed text-muted-foreground\">{f.body}</p>\n          </li>\n        ))}\n      </ul>\n    </section>\n  )\n}\n\nexport { Features2, type Features2Props }\n",
      "type": "registry:component",
      "target": "@components/ballmac/blocks/features-2/features-2.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "features",
      "grid",
      "icons",
      "landing"
    ],
    "version": "1.0.0",
    "updated": "2026-09-28",
    "ai": {
      "summary": "A calm, scannable grid for 3–9 features. Pass features=[{ icon, title, body }] with lucide icons.",
      "whenToUse": [
        "Listing several product benefits evenly",
        "Developer tools and libraries"
      ],
      "whenNotToUse": [
        "Two or three features that need visuals (use features-1)"
      ],
      "composesWith": [
        "hero-2",
        "cta-1"
      ],
      "a11y": [],
      "customization": [
        "features: { icon, title, body }[]",
        "eyebrow and title props"
      ]
    },
    "examples": [
      "features-2-demo"
    ],
    "url": "https://ui.ballmac.com/components/features-2"
  },
  "categories": [
    "blocks",
    "features"
  ],
  "type": "registry:block"
}