{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "features-6",
  "title": "Features 6: tabbed showcase",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "Pill tabs with a sliding indicator switch between feature panels: heading, checked points and link beside a product picture. Tabs scroll sideways on phones.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.ballmac.com/r/animated-tabs.json",
    "https://ui.ballmac.com/r/badge.json",
    "https://ui.ballmac.com/r/media.json"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/blocks/features-6/features-6.tsx",
      "content": "// Ballmac UI: Features 6. https://ui.ballmac.com/blocks/features-6\nimport * as React from \"react\"\nimport { ArrowRight, BarChart3, Check, MessageSquare, Plug, ShieldCheck } from \"lucide-react\"\n\nimport { AnimatedTabs, AnimatedTabsContent, AnimatedTabsList, AnimatedTabsTrigger } from \"@/components/ballmac/animated-tabs\"\nimport { Badge } from \"@/components/ballmac/badge\"\nimport { cn } from \"@/lib/utils\"\nimport { Media, type MediaSource } from \"@/components/ballmac/media\"\n\ntype Features6Tab = {\n  /** Stable key for the tab. */\n  value: string\n  /** Short tab label. */\n  label: string\n  /** Icon shown before the label. */\n  icon?: React.ReactNode\n  /** Panel heading. */\n  title: string\n  /** One or two sentences. */\n  description: string\n  /** Short checked points. */\n  points?: string[]\n  /** Link under the points. */\n  link?: { label: string; href: string }\n  /** Sample picture on the right of the panel. Decorative: the text must say what it shows. Replaced by `image` when you set one. */\n  visual?: React.ReactNode\n  /** Your own picture for this tab: an image URL (give it imageAlt), an object with alt text and a dark-mode file, or your own element. */\n  image?: MediaSource\n  /** Describes `image` when it is a plain URL. */\n  imageAlt?: string\n}\n\ntype Features6Props = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** Section heading. */\n  title?: string\n  /** One sentence under the heading. */\n  description?: string\n  /** The tabs, in order. */\n  tabs?: Features6Tab[]\n  /** Tab selected first. Defaults to the first tab. */\n  defaultValue?: string\n}\n\nconst tile = \"bg-card w-full max-w-sm rounded-2xl border p-5 shadow-[0_30px_70px_-35px_rgb(0_0_0/0.4)]\"\n\nfunction AnalyticsVisual() {\n  const bars = [38, 52, 44, 66, 58, 79, 72, 91]\n  return (\n    <div className={tile}>\n      <div className=\"flex items-start justify-between\">\n        <div>\n          <p className=\"text-muted-foreground text-xs\">Weekly active users</p>\n          <p className=\"mt-1 text-3xl font-semibold tracking-tight\">24,810</p>\n        </div>\n        <Badge status=\"success\">+18.2%</Badge>\n      </div>\n      <div className=\"mt-6 flex h-32 items-end gap-2\">\n        {bars.map((h, i) => (\n          <div\n            key={i}\n            className={cn(\"flex-1 rounded-t-md\", i === bars.length - 1 ? \"bg-chart-1\" : \"bg-chart-1/30\")}\n            style={{ height: `${h}%` }}\n          />\n        ))}\n      </div>\n      <div className=\"text-muted-foreground mt-2 flex justify-between text-[11px]\">\n        <span>Aug 3</span>\n        <span>Sep 21</span>\n      </div>\n    </div>\n  )\n}\n\nfunction CollabVisual() {\n  return (\n    <div className={tile}>\n      <div className=\"space-y-4\">\n        {[\n          [\"MK\", \"Maya\", \"Can we move the launch to the 14th?\", \"bg-chart-1/25\"],\n          [\"JO\", \"Jonas\", \"Yes. I’ll update the plan and ping design.\", \"bg-chart-3/25\"],\n        ].map(([i, n, t, c]) => (\n          <div key={n} className=\"flex gap-3\">\n            <span className={cn(\"text-foreground flex size-8 shrink-0 items-center justify-center rounded-full text-[11px] font-semibold\", c)}>{i}</span>\n            <div>\n              <p className=\"text-sm font-medium\">{n} <span className=\"text-muted-foreground font-normal\">· just now</span></p>\n              <p className=\"text-muted-foreground mt-0.5 text-sm\">{t}</p>\n            </div>\n          </div>\n        ))}\n      </div>\n      <div className=\"text-muted-foreground mt-5 flex items-center gap-2 rounded-xl border px-3 py-2.5 text-sm\">\n        <span className=\"bg-chart-1 h-4 w-px animate-pulse motion-reduce:animate-none\" /> Amara is typing…\n      </div>\n    </div>\n  )\n}\n\nfunction SecurityVisual() {\n  const rows = [\n    [\"Signed in with SSO\", \"Maya K.\", \"2m ago\"],\n    [\"Role changed to Admin\", \"Jonas O.\", \"1h ago\"],\n    [\"API key created\", \"Amara S.\", \"3h ago\"],\n    [\"Export downloaded\", \"Maya K.\", \"Yesterday\"],\n  ]\n  return (\n    <div className={tile}>\n      <p className=\"text-sm font-medium\">Audit log</p>\n      <ul className=\"mt-3 divide-y\">\n        {rows.map(([a, w, t]) => (\n          <li key={a} className=\"flex items-center justify-between gap-3 py-2.5 text-sm\">\n            <div className=\"min-w-0\">\n              <p className=\"truncate\">{a}</p>\n              <p className=\"text-muted-foreground text-xs\">{w}</p>\n            </div>\n            <span className=\"text-muted-foreground shrink-0 text-xs\">{t}</span>\n          </li>\n        ))}\n      </ul>\n    </div>\n  )\n}\n\nfunction IntegrationsVisual() {\n  const apps = [\n    [\"Slack\", true],\n    [\"GitHub\", true],\n    [\"Linear\", true],\n    [\"Notion\", false],\n    [\"Stripe\", true],\n    [\"Zapier\", false],\n  ] as const\n  return (\n    <div className={tile}>\n      <p className=\"text-sm font-medium\">Connected apps</p>\n      <div className=\"mt-4 grid grid-cols-3 gap-2.5\">\n        {apps.map(([name, on]) => (\n          <div key={name} className=\"flex flex-col items-center gap-2 rounded-xl border p-3 text-center\">\n            <span className=\"bg-muted flex size-9 items-center justify-center rounded-lg text-sm font-semibold\">{name[0]}</span>\n            <span className=\"text-xs\">{name}</span>\n            <span className={cn(\"flex items-center gap-1 text-[11px]\", on ? \"text-chart-2\" : \"text-muted-foreground\")}>\n              {on ? <><Check className=\"size-3\" /> Connected</> : \"Connect\"}\n            </span>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nconst defaultTabs: Features6Tab[] = [\n  {\n    value: \"analytics\",\n    label: \"Analytics\",\n    icon: <BarChart3 />,\n    title: \"Know what’s working, the same day.\",\n    description: \"Dashboards update as events arrive. Break any chart down by plan, country or campaign without writing a query.\",\n    points: [\"Real-time dashboards\", \"Cohorts and funnels\", \"Scheduled email reports\"],\n    link: { label: \"Explore analytics\", href: \"#\" },\n    visual: <AnalyticsVisual />,\n  },\n  {\n    value: \"collaboration\",\n    label: \"Collaboration\",\n    icon: <MessageSquare />,\n    title: \"Decide together, in context.\",\n    description: \"Comment on anything, mention a teammate and keep the whole conversation next to the work it is about.\",\n    points: [\"Threaded comments\", \"Mentions and reminders\", \"Live cursors and presence\"],\n    link: { label: \"See collaboration\", href: \"#\" },\n    visual: <CollabVisual />,\n  },\n  {\n    value: \"security\",\n    label: \"Security\",\n    icon: <ShieldCheck />,\n    title: \"Enterprise controls without the enterprise setup.\",\n    description: \"Single sign-on, roles and a complete audit trail are included, so security reviews stop blocking your launch.\",\n    points: [\"SAML SSO and SCIM\", \"Role-based access\", \"Exportable audit log\"],\n    link: { label: \"Read the security overview\", href: \"#\" },\n    visual: <SecurityVisual />,\n  },\n  {\n    value: \"integrations\",\n    label: \"Integrations\",\n    icon: <Plug />,\n    title: \"Plays well with your stack.\",\n    description: \"Connect the tools your team already lives in. Data flows both ways and stays in sync.\",\n    points: [\"80+ native integrations\", \"Webhooks and a REST API\", \"Two-way sync\"],\n    link: { label: \"Browse integrations\", href: \"#\" },\n    visual: <IntegrationsVisual />,\n  },\n]\n\nfunction Features6({\n  title = \"Everything your team needs, in one place.\",\n  description = \"Pick a topic to see how it works.\",\n  tabs = defaultTabs,\n  defaultValue,\n  className,\n  ...props\n}: Features6Props) {\n  return (\n    <section data-slot=\"features-6\" className={cn(\"mx-auto max-w-6xl px-4 py-20 sm:px-6 md:py-28\", className)} {...props}>\n      <div className=\"mx-auto max-w-2xl text-center\">\n        <h2 className=\"text-3xl font-semibold tracking-[-0.035em] text-balance sm:text-4xl lg:text-5xl\">{title}</h2>\n        <p className=\"text-muted-foreground mt-4 text-lg text-pretty\">{description}</p>\n      </div>\n      <AnimatedTabs defaultValue={defaultValue ?? tabs[0]?.value} className=\"mt-10 md:mt-14\">\n        <div className=\"-mx-4 flex justify-center overflow-x-auto px-4 [scrollbar-width:none]\">\n          <AnimatedTabsList aria-label=\"Feature areas\" className=\"h-11\">\n            {tabs.map((t) => (\n              <AnimatedTabsTrigger key={t.value} value={t.value} className=\"px-4\">\n                {t.icon}\n                {t.label}\n              </AnimatedTabsTrigger>\n            ))}\n          </AnimatedTabsList>\n        </div>\n        {tabs.map((t) => (\n          <AnimatedTabsContent key={t.value} value={t.value} className=\"mt-8\">\n            <div className=\"bg-card grid overflow-hidden rounded-3xl border md:grid-cols-[1fr_1.05fr]\">\n              <div className=\"flex flex-col justify-center p-6 sm:p-10 lg:p-14\">\n                <h3 className=\"text-2xl font-semibold tracking-[-0.03em] text-balance sm:text-3xl\">{t.title}</h3>\n                <p className=\"text-muted-foreground mt-4 text-base leading-relaxed text-pretty\">{t.description}</p>\n                {t.points && (\n                  <ul className=\"mt-6 space-y-2.5 text-sm\">\n                    {t.points.map((p) => (\n                      <li key={p} className=\"flex items-start gap-2.5\">\n                        <Check className=\"text-chart-2 mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n                        {p}\n                      </li>\n                    ))}\n                  </ul>\n                )}\n                {t.link && (\n                  <a href={t.link.href} className=\"group/link focus-visible:ring-ring/50 mt-8 inline-flex w-fit items-center gap-1.5 rounded-md text-sm font-medium outline-none focus-visible:ring-[3px]\">\n                    {t.link.label}\n                    <ArrowRight className=\"size-4 transition-transform group-hover/link:translate-x-0.5 motion-reduce:transition-none rtl:rotate-180 rtl:group-hover/link:-translate-x-0.5\" aria-hidden=\"true\" />\n                  </a>\n                )}\n              </div>\n              <div aria-hidden={t.image ? undefined : true} className=\"bg-muted/40 relative flex items-center justify-center border-t p-6 sm:p-10 md:border-t-0 md:border-s\">\n                <div className=\"absolute inset-0 bg-[radial-gradient(color-mix(in_oklch,var(--foreground)_14%,transparent)_1px,transparent_1px)] [background-size:18px_18px] [mask-image:radial-gradient(70%_70%_at_50%_50%,black,transparent)]\" />\n                <div className=\"relative flex w-full justify-center\">{t.image ? <Media media={t.image} alt={t.imageAlt} fit=\"contain\" className=\"w-full rounded-xl\" /> : t.visual}</div>\n              </div>\n            </div>\n          </AnimatedTabsContent>\n        ))}\n      </AnimatedTabs>\n    </section>\n  )\n}\n\nexport { Features6, type Features6Props, type Features6Tab }\n",
      "type": "registry:component",
      "target": "@components/ballmac/blocks/features-6/features-6.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "features",
      "tabs",
      "showcase",
      "panels",
      "product"
    ],
    "version": "1.0.0",
    "updated": "2026-10-01",
    "ai": {
      "summary": "A compact way to show several feature areas without a long scroll. Pass tabs=[{ value, label, icon?, title, description, points?, link?, visual }].",
      "whenToUse": [
        "Four to six equal feature areas",
        "Pages that need to stay short"
      ],
      "whenNotToUse": [
        "A single story told in order (use features-5)"
      ],
      "composesWith": [
        "hero-6",
        "logo-cloud-1",
        "pricing-2",
        "cta-1"
      ],
      "a11y": [
        {
          "keys": "Arrow Left / Right",
          "action": "Moves between tabs and shows the panel"
        },
        {
          "keys": "Tab",
          "action": "Moves from the tab list into the panel"
        }
      ],
      "customization": [
        "tabs: { value, label, icon?, title, description, points?, link?, visual }[]",
        "defaultValue: the tab selected first"
      ]
    },
    "examples": [
      "features-6-demo",
      "features-6-two"
    ],
    "url": "https://ui.ballmac.com/components/features-6"
  },
  "categories": [
    "blocks",
    "features"
  ],
  "type": "registry:block"
}