{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "features-1",
  "title": "Features 1: bento grid",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "Bento feature grid of spotlight cards in two sizes, with an animated stat and keyboard-shortcut hints mixed in for texture.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.ballmac.com/r/kbd.json",
    "https://ui.ballmac.com/r/number-ticker.json",
    "https://ui.ballmac.com/r/spotlight-card.json"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/blocks/features-1/features-1.tsx",
      "content": "// Ballmac UI: Features 1. https://ui.ballmac.com/blocks/features-1\nimport * as React from \"react\"\nimport { GitBranch, Lock, Radar, Zap } from \"lucide-react\"\n\nimport { Kbd, KbdGroup } from \"@/components/ballmac/kbd\"\nimport { NumberTicker } from \"@/components/ballmac/number-ticker\"\nimport { SpotlightCard } from \"@/components/ballmac/spotlight-card\"\nimport { cn } from \"@/lib/utils\"\n\ntype Features1Props = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** Mono label above the heading. */\n  eyebrow?: string\n  /** Section heading. */\n  title?: string\n  /** One sentence under the heading. */\n  description?: string\n}\n\nfunction Features1({\n  eyebrow = \"Features\",\n  title = \"Everything a release needs, in one place.\",\n  description = \"From the first commit to the rollback you never had to use.\",\n  className,\n  ...props\n}: Features1Props) {\n  return (\n    <section data-slot=\"features-1\" 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        <p className=\"mt-4 text-lg text-muted-foreground\">{description}</p>\n      </div>\n      <div className=\"mt-12 grid auto-rows-[minmax(200px,auto)] gap-4 md:grid-cols-3\">\n        <SpotlightCard className=\"md:col-span-2\">\n          <Cell icon={Zap} title=\"Previews on every push\" body=\"A live URL for each branch, torn down when the branch merges.\">\n            <div className=\"mt-6 flex items-end gap-3\">\n              <span className=\"text-5xl font-semibold tracking-tight\">\n                <NumberTicker value={42} />s\n              </span>\n              <span className=\"pb-2 text-sm text-muted-foreground\">median build time</span>\n            </div>\n          </Cell>\n        </SpotlightCard>\n        <SpotlightCard>\n          <Cell icon={Lock} title=\"Secrets stay secret\" body=\"Environment variables are encrypted at rest and never shown in logs.\" />\n        </SpotlightCard>\n        <SpotlightCard>\n          <Cell icon={Radar} title=\"Performance budgets\" body=\"Fail a check when a change makes the page slower than you allow.\" />\n        </SpotlightCard>\n        <SpotlightCard className=\"md:col-span-2\">\n          <Cell icon={GitBranch} title=\"Keyboard-first reviews\" body=\"Jump between previews, comments and diffs without touching the mouse.\">\n            <div className=\"mt-6 flex flex-wrap gap-4 text-sm text-muted-foreground\">\n              <span className=\"flex items-center gap-2\">\n                <KbdGroup>\n                  <Kbd>⌘</Kbd>\n                  <Kbd>K</Kbd>\n                </KbdGroup>\n                Search\n              </span>\n              <span className=\"flex items-center gap-2\">\n                <Kbd>J</Kbd>/<Kbd>K</Kbd> Next and previous\n              </span>\n              <span className=\"flex items-center gap-2\">\n                <Kbd>R</Kbd> Roll back\n              </span>\n            </div>\n          </Cell>\n        </SpotlightCard>\n      </div>\n    </section>\n  )\n}\n\nfunction Cell({ icon: Icon, title, body, children }: { icon: React.ComponentType<{ className?: string }>; title: string; body: string; children?: React.ReactNode }) {\n  return (\n    <div className=\"flex h-full flex-col p-6\">\n      <span className=\"flex size-9 items-center justify-center rounded-lg border bg-background\">\n        <Icon className=\"size-4\" aria-hidden=\"true\" />\n      </span>\n      <h3 className=\"mt-5 font-semibold tracking-tight\">{title}</h3>\n      <p className=\"mt-1.5 text-sm leading-relaxed text-muted-foreground\">{body}</p>\n      {children}\n    </div>\n  )\n}\n\nexport { Features1, type Features1Props }\n",
      "type": "registry:component",
      "target": "@components/ballmac/blocks/features-1/features-1.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "features",
      "bento",
      "grid",
      "landing"
    ],
    "version": "1.0.0",
    "updated": "2026-09-28",
    "ai": {
      "summary": "A four-cell bento grid for a product's main features. Edit the cells directly; each is a SpotlightCard with an icon, title, body and optional extra content.",
      "whenToUse": [
        "Showing 3–6 headline features with visual variety",
        "SaaS and developer product landing pages"
      ],
      "whenNotToUse": [
        "Long lists of features (use features-2)"
      ],
      "composesWith": [
        "hero-1",
        "pricing-1"
      ],
      "a11y": [],
      "customization": [
        "eyebrow, title, description props",
        "Change cells, spans (md:col-span-2) and icons in the source"
      ]
    },
    "examples": [
      "features-1-demo"
    ],
    "url": "https://ui.ballmac.com/components/features-1"
  },
  "categories": [
    "blocks",
    "features"
  ],
  "type": "registry:block"
}