{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "features-3",
  "title": "Features 3: integrations hub with beams",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "Integrations section: heading, description and checked benefits beside a hub diagram where animated beams flow between your product and six tools.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.ballmac.com/r/animated-beam.json"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/blocks/features-3/features-3.tsx",
      "content": "// Ballmac UI: Features 3. https://ui.ballmac.com/blocks/features-3\n\"use client\"\n\nimport * as React from \"react\"\nimport { Calendar, Check, Database, FileText, GitBranch, Mail, MessageSquare, Sparkles, type LucideIcon } from \"lucide-react\"\n\nimport { AnimatedBeam } from \"@/components/ballmac/animated-beam\"\nimport { cn } from \"@/lib/utils\"\n\ntype Integration = { name: string; icon: LucideIcon }\n\ntype Features3Props = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** Small label above the heading. */\n  eyebrow?: string\n  /** The heading. */\n  title?: string\n  /** One or two sentences under the heading. */\n  description?: string\n  /** Short benefit lines with check marks. */\n  points?: string[]\n  /** Up to six tools shown around the hub, three per side. */\n  integrations?: Integration[]\n  /** Icon in the center of the diagram. */\n  hubIcon?: LucideIcon\n  /** Accessible name of the hub. */\n  hubLabel?: string\n}\n\nconst defaultIntegrations: Integration[] = [\n  { name: \"Database\", icon: Database },\n  { name: \"Repository\", icon: GitBranch },\n  { name: \"Docs\", icon: FileText },\n  { name: \"Email\", icon: Mail },\n  { name: \"Calendar\", icon: Calendar },\n  { name: \"Chat\", icon: MessageSquare },\n]\n\nfunction Node({ ref, icon: Icon, label, hub }: { ref: React.Ref<HTMLDivElement>; icon: LucideIcon; label: string; hub?: boolean }) {\n  return (\n    <div className=\"relative z-10 flex flex-col items-center gap-2\">\n      <div\n        ref={ref}\n        className={cn(\n          \"flex items-center justify-center rounded-2xl border shadow-[0_1px_2px_0_rgb(0_0_0/0.06),0_8px_24px_-12px_rgb(0_0_0/0.3)]\",\n          hub ? \"size-20 bg-foreground text-background [&_svg]:size-8\" : \"size-14 bg-card [&_svg]:size-6\"\n        )}\n      >\n        <Icon aria-hidden=\"true\" />\n      </div>\n      <span className=\"text-xs font-medium text-muted-foreground\">{label}</span>\n    </div>\n  )\n}\n\nfunction Features3({\n  eyebrow = \"Integrations\",\n  title = \"Connects to the tools you already use.\",\n  description = \"Plug in your data, code and calendar once. Every workflow can read from them and write back, with permissions you control.\",\n  points = [\"Two-way sync in real time\", \"Scoped, revocable access per tool\", \"Audit log of every read and write\"],\n  integrations = defaultIntegrations,\n  hubIcon = Sparkles,\n  hubLabel = \"Your workspace\",\n  className,\n  ...props\n}: Features3Props) {\n  const container = React.useRef<HTMLDivElement>(null)\n  const hub = React.useRef<HTMLDivElement>(null)\n  const r0 = React.useRef<HTMLDivElement>(null)\n  const r1 = React.useRef<HTMLDivElement>(null)\n  const r2 = React.useRef<HTMLDivElement>(null)\n  const r3 = React.useRef<HTMLDivElement>(null)\n  const r4 = React.useRef<HTMLDivElement>(null)\n  const r5 = React.useRef<HTMLDivElement>(null)\n  const refs = [r0, r1, r2, r3, r4, r5]\n  const tools = integrations.slice(0, 6)\n  const left = tools.slice(0, 3)\n  const right = tools.slice(3)\n  const curve = [60, 0, -60]\n\n  return (\n    <section data-slot=\"features-3\" className={cn(\"mx-auto max-w-6xl px-4 py-20 sm:px-6\", className)} {...props}>\n      <div className=\"grid grid-cols-1 items-center gap-14 lg:grid-cols-2\">\n        <div>\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 leading-relaxed text-pretty text-muted-foreground\">{description}</p>\n          <ul className=\"mt-8 space-y-3\">\n            {points.map((p) => (\n              <li key={p} className=\"flex items-center gap-3\">\n                <span className=\"flex size-5 items-center justify-center rounded-full bg-primary/10 text-primary\">\n                  <Check className=\"size-3\" strokeWidth={3} aria-hidden=\"true\" />\n                </span>\n                {p}\n              </li>\n            ))}\n          </ul>\n        </div>\n        <div\n          ref={container}\n          role=\"img\"\n          aria-label={`${hubLabel} connected to ${tools.map((t) => t.name).join(\", \")}`}\n          className=\"relative flex items-center justify-between gap-6 rounded-3xl border bg-card/50 px-6 py-10 sm:px-12\"\n        >\n          <div className=\"flex flex-col gap-8\">\n            {left.map((t, i) => (\n              <Node key={t.name} ref={refs[i]} icon={t.icon} label={t.name} />\n            ))}\n          </div>\n          <Node ref={hub} icon={hubIcon} label={hubLabel} hub />\n          <div className=\"flex flex-col gap-8\">\n            {right.map((t, i) => (\n              <Node key={t.name} ref={refs[i + 3]} icon={t.icon} label={t.name} />\n            ))}\n          </div>\n          {left.map((t, i) => (\n            <AnimatedBeam key={t.name} containerRef={container} fromRef={refs[i]} toRef={hub} curvature={curve[i]} delay={i * 0.5} duration={3.5} />\n          ))}\n          {right.map((t, i) => (\n            <AnimatedBeam key={t.name} containerRef={container} fromRef={refs[i + 3]} toRef={hub} curvature={curve[i]} delay={0.25 + i * 0.5} duration={3.5} reverse />\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n\nexport { Features3, type Features3Props, type Integration }\n",
      "type": "registry:component",
      "target": "@components/ballmac/blocks/features-3/features-3.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "features",
      "integrations",
      "animated beam",
      "diagram"
    ],
    "version": "1.0.0",
    "updated": "2026-09-29",
    "ai": {
      "summary": "Explains integrations or data flow. Pass up to six `integrations` ({ name, icon }) and set hubIcon/hubLabel for your product.",
      "whenToUse": [
        "Integrations or connectors pages",
        "Showing that a product sits between many tools (AI agents, automation, sync)"
      ],
      "whenNotToUse": [
        "Listing more than six integrations (use a logo grid)"
      ],
      "composesWith": [
        "hero-4",
        "features-1",
        "cta-2"
      ],
      "a11y": [],
      "customization": [
        "eyebrow, title, description, points",
        "integrations, hubIcon, hubLabel"
      ]
    },
    "examples": [
      "features-3-demo"
    ],
    "url": "https://ui.ballmac.com/components/features-3"
  },
  "categories": [
    "blocks",
    "features"
  ],
  "type": "registry:block"
}