{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "features-4",
  "title": "Features 4: Mac app bento",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "Bento feature grid for a desktop app: menu bar companion, keyboard shortcuts, privacy, iCloud sync and notifications, each with a small live visual.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.ballmac.com/r/bento-grid.json",
    "https://ui.ballmac.com/r/kbd.json"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/blocks/features-4/features-4.tsx",
      "content": "// Ballmac UI: Features 4. https://ui.ballmac.com/blocks/features-4\nimport * as React from \"react\"\nimport { Bell, Check, Cloud, Command, Keyboard, Laptop, Lock, MenuSquare, Smartphone, WifiOff } from \"lucide-react\"\n\nimport { BentoCard, BentoGrid } from \"@/components/ballmac/bento-grid\"\nimport { Kbd, KbdGroup } from \"@/components/ballmac/kbd\"\nimport { cn } from \"@/lib/utils\"\n\ntype Features4Props = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** Small label above the heading. */\n  eyebrow?: string\n  /** The heading. */\n  title?: string\n  /** One sentence under the heading. */\n  description?: string\n}\n\nfunction Visual({ className, children }: { className?: string; children: React.ReactNode }) {\n  return <div className={cn(\"absolute inset-0 flex items-start justify-center p-6\", className)}>{children}</div>\n}\n\n/** A menu bar with the app's popover open. */\nfunction MenuBarVisual() {\n  return (\n    <Visual className=\"pt-5\">\n      <div className=\"w-full max-w-md\">\n        <div className=\"flex h-7 items-center justify-end gap-3 rounded-lg border bg-muted/60 px-3 text-[11px] text-muted-foreground\">\n          <span className=\"rounded bg-foreground/10 p-0.5 text-foreground\">\n            <Check className=\"size-3\" strokeWidth={3} />\n          </span>\n          <span>Tue 9:41</span>\n        </div>\n        <div className=\"mt-2 ms-auto w-60 rounded-xl border bg-card p-2 text-start text-xs shadow-[0_12px_30px_-12px_rgb(0_0_0/0.35)]\">\n          {[\"Reply to beta feedback\", \"Notarize the build\", \"Schedule the announcement\"].map((t, i) => (\n            <div key={t} className={cn(\"flex items-center gap-2 rounded-md px-2 py-1.5\", i === 0 && \"bg-accent\")}>\n              <span className=\"size-3 rounded-full border border-muted-foreground/50\" />\n              {t}\n            </div>\n          ))}\n        </div>\n      </div>\n    </Visual>\n  )\n}\n\nfunction ShortcutVisual() {\n  return (\n    <Visual className=\"flex-col items-center gap-2.5 pt-8\">\n      {[\n        { keys: [\"⌘\", \"N\"], label: \"New task\" },\n        { keys: [\"⌘\", \"K\"], label: \"Jump anywhere\" },\n      ].map((s) => (\n        <div key={s.label} className=\"flex w-52 items-center justify-between rounded-lg border bg-card px-3 py-2 text-xs\">\n          <span className=\"text-muted-foreground\">{s.label}</span>\n          <KbdGroup>\n            {s.keys.map((k) => (\n              <Kbd key={k}>{k}</Kbd>\n            ))}\n          </KbdGroup>\n        </div>\n      ))}\n    </Visual>\n  )\n}\n\nfunction PrivacyVisual() {\n  return (\n    <Visual className=\"pt-9\">\n      <div className=\"relative flex size-20 items-center justify-center rounded-3xl border bg-card shadow-[0_12px_30px_-14px_rgb(0_0_0/0.4)]\">\n        <Lock className=\"size-8\" aria-hidden=\"true\" />\n        <span className=\"absolute -end-2 -bottom-2 flex size-7 items-center justify-center rounded-full border bg-background text-muted-foreground\">\n          <WifiOff className=\"size-3.5\" aria-hidden=\"true\" />\n        </span>\n      </div>\n    </Visual>\n  )\n}\n\nfunction SyncVisual() {\n  return (\n    <Visual className=\"items-center gap-4 pt-10\">\n      <span className=\"flex size-12 items-center justify-center rounded-2xl border bg-card\">\n        <Laptop className=\"size-6\" aria-hidden=\"true\" />\n      </span>\n      <span className=\"flex items-center gap-1 text-primary\" aria-hidden=\"true\">\n        {[0, 1, 2].map((i) => (\n          <span key={i} className=\"size-1.5 animate-pulse rounded-full bg-current motion-reduce:animate-none\" style={{ animationDelay: `${i * 200}ms` }} />\n        ))}\n        <Cloud className=\"mx-1 size-5\" />\n        {[0, 1, 2].map((i) => (\n          <span key={i} className=\"size-1.5 animate-pulse rounded-full bg-current motion-reduce:animate-none\" style={{ animationDelay: `${(i + 3) * 200}ms` }} />\n        ))}\n      </span>\n      <span className=\"flex size-12 items-center justify-center rounded-2xl border bg-card\">\n        <Smartphone className=\"size-6\" aria-hidden=\"true\" />\n      </span>\n    </Visual>\n  )\n}\n\nfunction NotificationVisual() {\n  return (\n    <Visual className=\"pt-5\">\n      <div className=\"relative w-full max-w-sm\">\n        <div className=\"absolute inset-x-4 -bottom-2 h-full rounded-2xl border bg-card/60\" />\n        <div className=\"relative flex items-start gap-3 rounded-2xl border bg-card/95 p-3 text-start shadow-[0_12px_30px_-14px_rgb(0_0_0/0.4)] backdrop-blur\">\n          <span className=\"flex size-9 shrink-0 items-center justify-center rounded-xl bg-primary text-primary-foreground\">\n            <Check className=\"size-4\" strokeWidth={3} aria-hidden=\"true\" />\n          </span>\n          <div className=\"min-w-0 text-xs\">\n            <p className=\"flex justify-between gap-2 font-semibold\">\n              Due in 15 minutes <span className=\"font-normal text-muted-foreground\">now</span>\n            </p>\n            <p className=\"mt-0.5 truncate text-muted-foreground\">Schedule the announcement for 9:00</p>\n          </div>\n        </div>\n      </div>\n    </Visual>\n  )\n}\n\nfunction Features4({\n  eyebrow = \"Built for the Mac\",\n  title = \"Feels like it came with your Mac.\",\n  description = \"Native shortcuts, a menu bar companion and notifications that respect Focus. No account, no tracking.\",\n  className,\n  ...props\n}: Features4Props) {\n  return (\n    <section data-slot=\"features-4\" className={cn(\"mx-auto max-w-6xl px-4 py-20 sm:px-6\", className)} {...props}>\n      <div className=\"mx-auto max-w-2xl text-center\">\n        <p className=\"text-sm font-medium text-primary\">{eyebrow}</p>\n        <h2 className=\"mt-3 text-3xl font-semibold tracking-[-0.035em] text-balance sm:text-5xl\">{title}</h2>\n        <p className=\"mt-4 text-lg text-pretty text-muted-foreground\">{description}</p>\n      </div>\n      <BentoGrid columns={3} rowHeight=\"17rem\" className=\"mt-14\">\n        <BentoCard colSpan={2} icon={<MenuSquare />} title=\"Lives in your menu bar\" description=\"Add and check off tasks from any app, without switching windows.\" background={<MenuBarVisual />} />\n        <BentoCard icon={<Keyboard />} title=\"Keyboard for everything\" description=\"Every action has a shortcut you can change.\" background={<ShortcutVisual />} />\n        <BentoCard icon={<Lock />} title=\"Private by design\" description=\"Your tasks stay on your devices. No account required.\" background={<PrivacyVisual />} />\n        <BentoCard icon={<Cloud />} title=\"Syncs through iCloud\" description=\"Mac, iPhone and iPad stay in step, end to end encrypted.\" background={<SyncVisual />} />\n        <BentoCard icon={<Bell />} title=\"Reminders that respect Focus\" description=\"Notifications arrive when you want them, never during a meeting.\" background={<NotificationVisual />} />\n      </BentoGrid>\n      <p className=\"mt-6 flex items-center justify-center gap-2 text-xs text-muted-foreground\">\n        <Command className=\"size-3.5\" aria-hidden=\"true\" /> Universal app for Apple silicon and Intel\n      </p>\n    </section>\n  )\n}\n\nexport { Features4, type Features4Props }\n",
      "type": "registry:component",
      "target": "@components/ballmac/blocks/features-4/features-4.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "features",
      "bento",
      "mac app",
      "desktop"
    ],
    "version": "1.0.0",
    "updated": "2026-09-29",
    "ai": {
      "summary": "Feature section for Mac or desktop apps. Edit eyebrow/title/description props; change the five BentoCards and their visuals in the source to match your features.",
      "whenToUse": [
        "Desktop or Mac app landing pages",
        "Showing five features with visuals instead of icons"
      ],
      "whenNotToUse": [
        "Web SaaS feature lists (use features-1 or features-2)"
      ],
      "composesWith": [
        "hero-5",
        "pricing-1",
        "testimonials-1"
      ],
      "a11y": [],
      "customization": [
        "eyebrow, title, description props",
        "BentoCard title, description, icon and background visual per feature"
      ]
    },
    "examples": [
      "features-4-demo"
    ],
    "url": "https://ui.ballmac.com/components/features-4"
  },
  "categories": [
    "blocks",
    "features"
  ],
  "type": "registry:block"
}