{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "features-4",
  "title": "Tabbed Feature Categories",
  "description": "Features section with Collaboration, Automation, and Security tabs that swap a three-column grid of icon, title, and description cards.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "badge",
    "card",
    "tabs"
  ],
  "files": [
    {
      "path": "registry/blocks/features/4/features-block.tsx",
      "content": "import { Badge } from \"@/components/ui/badge\"\nimport { Card } from \"@/components/ui/card\"\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\"\nimport { cn } from \"@/lib/utils\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\n/** Props a call site may pass through to an icon. */\ntype IconProps = { className?: string; size?: number | string }\n\ntype Feature = {\n  icon: React.ComponentType<{ className?: string }>\n  title: string\n  description: string\n}\n\ntype FeatureTab = {\n  value: string\n  label: string\n  features: Feature[]\n}\n\nconst TABS: FeatureTab[] = [\n  {\n    value: \"collaboration\",\n    label: \"Collaboration\",\n    features: [\n      {\n        icon: (p: IconProps) => (\n          <IconPlaceholder\n            lucide=\"Group\"\n            tabler=\"IconUsers\"\n            hugeicons=\"GroupIcon\"\n            phosphor=\"Users\"\n            remixicon=\"RiGroupLine\"\n            {...p}\n          />\n        ),\n        title: \"Shared workspaces\",\n        description:\n          \"Bring every team into one workspace with granular roles and instant invites.\",\n      },\n      {\n        icon: (p: IconProps) => (\n          <IconPlaceholder\n            lucide=\"MessageCircle\"\n            tabler=\"IconMessageCircle\"\n            hugeicons=\"Message01Icon\"\n            phosphor=\"ChatCircle\"\n            remixicon=\"RiChat3Line\"\n            {...p}\n          />\n        ),\n        title: \"Inline comments\",\n        description:\n          \"Discuss changes in context with threaded comments, mentions, and reactions.\",\n      },\n      {\n        icon: (p: IconProps) => (\n          <IconPlaceholder\n            lucide=\"History\"\n            tabler=\"IconHistory\"\n            hugeicons=\"HistoryIcon\"\n            phosphor=\"ClockCounterClockwise\"\n            remixicon=\"RiHistoryLine\"\n            {...p}\n          />\n        ),\n        title: \"Version history\",\n        description:\n          \"Track every edit and restore any previous state with a single click.\",\n      },\n    ],\n  },\n  {\n    value: \"automation\",\n    label: \"Automation\",\n    features: [\n      {\n        icon: (p: IconProps) => (\n          <IconPlaceholder\n            lucide=\"Flashlight\"\n            tabler=\"IconBulb\"\n            hugeicons=\"FlashlightIcon\"\n            phosphor=\"Flashlight\"\n            remixicon=\"RiFlashlightLine\"\n            {...p}\n          />\n        ),\n        title: \"Visual workflows\",\n        description:\n          \"Chain triggers and actions on a drag-and-drop canvas, no code required.\",\n      },\n      {\n        icon: (p: IconProps) => (\n          <IconPlaceholder\n            lucide=\"Bot\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RobotIcon\"\n            phosphor=\"Robot\"\n            remixicon=\"RiRobot2Line\"\n            {...p}\n          />\n        ),\n        title: \"Smart agents\",\n        description:\n          \"Let Acme agents triage requests, draft replies, and route work for you.\",\n      },\n      {\n        icon: (p: IconProps) => (\n          <IconPlaceholder\n            lucide=\"Timer\"\n            tabler=\"IconClockBolt\"\n            hugeicons=\"TimerIcon\"\n            phosphor=\"Timer\"\n            remixicon=\"RiTimerFlashLine\"\n            {...p}\n          />\n        ),\n        title: \"Scheduled runs\",\n        description:\n          \"Queue recurring jobs down to the minute with built-in retries and alerts.\",\n      },\n    ],\n  },\n  {\n    value: \"security\",\n    label: \"Security\",\n    features: [\n      {\n        icon: (p: IconProps) => (\n          <IconPlaceholder\n            lucide=\"ShieldCheck\"\n            tabler=\"IconShieldCheck\"\n            hugeicons=\"Shield01Icon\"\n            phosphor=\"ShieldCheck\"\n            remixicon=\"RiShieldCheckLine\"\n            {...p}\n          />\n        ),\n        title: \"SOC 2 Type II\",\n        description:\n          \"Independently audited controls keep your data compliant and protected.\",\n      },\n      {\n        icon: (p: IconProps) => (\n          <IconPlaceholder\n            lucide=\"Key\"\n            tabler=\"IconKey\"\n            hugeicons=\"KeyIcon\"\n            phosphor=\"Key\"\n            remixicon=\"RiKeyLine\"\n            {...p}\n          />\n        ),\n        title: \"SSO & SCIM\",\n        description:\n          \"Provision users through SAML, OIDC, and automated directory sync.\",\n      },\n      {\n        icon: (p: IconProps) => (\n          <IconPlaceholder\n            lucide=\"Fingerprint\"\n            tabler=\"IconFingerprint\"\n            hugeicons=\"FingerPrintIcon\"\n            phosphor=\"Fingerprint\"\n            remixicon=\"RiFingerprintLine\"\n            {...p}\n          />\n        ),\n        title: \"Audit logging\",\n        description:\n          \"Every action is timestamped, immutable, and exportable to your SIEM.\",\n      },\n    ],\n  },\n]\n\nexport default function FeaturesBlock() {\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-16 text-foreground\">\n      <div className=\"mx-auto w-full max-w-5xl\">\n        <div className=\"flex flex-col items-center text-center\">\n          <Badge variant=\"secondary\" className=\"gap-1.5\">\n            <IconPlaceholder\n              lucide=\"Braces\"\n              tabler=\"IconBraces\"\n              hugeicons=\"BracesIcon\"\n              phosphor=\"BracketsCurly\"\n              remixicon=\"RiBracesLine\"\n              data-icon=\"inline-start\"\n              className=\"size-3.5\"\n            />\n            Built for teams\n          </Badge>\n          <h2 className=\"mt-4 font-heading text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n            Everything you need to ship faster\n          </h2>\n          <p className=\"mt-3 max-w-xl text-pretty text-muted-foreground\">\n            Acme brings collaboration, automation, and enterprise-grade security\n            together in one connected platform.\n          </p>\n        </div>\n\n        <Tabs\n          defaultValue=\"collaboration\"\n          className=\"mt-10 w-full items-center\"\n        >\n          <TabsList className=\"h-auto flex-wrap gap-1 rounded-lg p-1\">\n            {TABS.map((tab) => (\n              <TabsTrigger\n                key={tab.value}\n                value={tab.value}\n                className=\"rounded-md px-4 py-1.5 text-sm\"\n              >\n                {tab.label}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n\n          {TABS.map((tab) => (\n            <TabsContent key={tab.value} value={tab.value} className=\"mt-8\">\n              <div className=\"grid gap-4 sm:grid-cols-2 md:grid-cols-3\">\n                {tab.features.map((feature) => {\n                  const Icon = feature.icon\n                  return (\n                    <Card\n                      key={feature.title}\n                      className=\"group h-full gap-4 p-6 transition-colors hover:border-primary/40\"\n                    >\n                      <div\n                        className={cn(\n                          \"flex size-11 items-center justify-center rounded-md\",\n                          \"bg-primary/10 text-primary transition-colors\",\n                          \"group-hover:bg-primary group-hover:text-primary-foreground\"\n                        )}\n                      >\n                        <Icon className=\"size-5\" />\n                      </div>\n                      <div className=\"space-y-1.5\">\n                        <h3 className=\"font-heading text-base font-medium\">\n                          {feature.title}\n                        </h3>\n                        <p className=\"text-sm/relaxed text-muted-foreground\">\n                          {feature.description}\n                        </p>\n                      </div>\n                      <div className=\"mt-auto flex items-center gap-2 text-xs font-medium text-muted-foreground\">\n                        <IconPlaceholder\n                          lucide=\"GitBranch\"\n                          tabler=\"IconGitBranch\"\n                          hugeicons=\"GitBranchIcon\"\n                          phosphor=\"GitBranch\"\n                          remixicon=\"RiGitBranchLine\"\n                          className=\"size-3.5\"\n                        />\n                        Included on every plan\n                      </div>\n                    </Card>\n                  )\n                })}\n              </div>\n            </TabsContent>\n          ))}\n        </Tabs>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/features-4.tsx"
    }
  ],
  "meta": {
    "height": "610px",
    "tier": "free"
  },
  "categories": [
    "features"
  ],
  "type": "registry:block"
}