{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs-12",
  "title": "In card",
  "description": "Tabs inside a card with stats, member list, and billing summary panels.",
  "dependencies": [],
  "registryDependencies": [
    "tabs",
    "card",
    "separator"
  ],
  "files": [
    {
      "path": "registry/patterns/tabs/tabs-12.tsx",
      "content": "import {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/components/ui/tabs'\n\nexport function Tabs12() {\n  return (\n    <Card className=\"w-full max-w-md\">\n      <CardHeader>\n        <CardTitle>Workspace</CardTitle>\n        <CardDescription>Switch between views.</CardDescription>\n      </CardHeader>\n      <CardContent className=\"p-0\">\n        <Tabs defaultValue=\"overview\" className=\"gap-0\">\n          <TabsList variant=\"line\" className=\"mx-6 w-[calc(100%-3rem)]\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"members\">Members</TabsTrigger>\n            <TabsTrigger value=\"billing\">Billing</TabsTrigger>\n          </TabsList>\n          <Separator />\n          <div className=\"px-6 py-6\">\n            <TabsContent value=\"overview\" className=\"mt-0 space-y-6\">\n              <dl className=\"grid grid-cols-3 gap-4 text-center\">\n                <div className=\"space-y-1\">\n                  <dt className=\"text-muted-foreground text-xs\">Projects</dt>\n                  <dd className=\"text-2xl font-semibold tabular-nums\">12</dd>\n                </div>\n                <div className=\"space-y-1\">\n                  <dt className=\"text-muted-foreground text-xs\">Members</dt>\n                  <dd className=\"text-2xl font-semibold tabular-nums\">4</dd>\n                </div>\n                <div className=\"space-y-1\">\n                  <dt className=\"text-muted-foreground text-xs\">Storage</dt>\n                  <dd className=\"text-2xl font-semibold tabular-nums\">87%</dd>\n                </div>\n              </dl>\n              <p className=\"text-muted-foreground text-sm leading-relaxed\">\n                You are on track this month. Storage is nearing capacity —\n                consider upgrading before the next billing cycle.\n              </p>\n            </TabsContent>\n            <TabsContent value=\"members\" className=\"mt-0 space-y-4\">\n              <ul className=\"space-y-3\">\n                <li className=\"flex items-center justify-between gap-4\">\n                  <div className=\"flex items-center gap-3\">\n                    <span className=\"bg-muted flex size-8 shrink-0 items-center justify-center rounded-full text-xs font-medium\">\n                      AR\n                    </span>\n                    <span className=\"text-sm font-medium\">Alex Rivera</span>\n                  </div>\n                  <span className=\"text-muted-foreground text-xs\">Owner</span>\n                </li>\n                <li className=\"flex items-center justify-between gap-4\">\n                  <div className=\"flex items-center gap-3\">\n                    <span className=\"bg-muted flex size-8 shrink-0 items-center justify-center rounded-full text-xs font-medium\">\n                      JL\n                    </span>\n                    <span className=\"text-sm font-medium\">Jordan Lee</span>\n                  </div>\n                  <span className=\"text-muted-foreground text-xs\">Admin</span>\n                </li>\n                <li className=\"flex items-center justify-between gap-4\">\n                  <div className=\"flex items-center gap-3\">\n                    <span className=\"bg-muted flex size-8 shrink-0 items-center justify-center rounded-full text-xs font-medium\">\n                      SC\n                    </span>\n                    <span className=\"text-sm font-medium\">Sam Chen</span>\n                  </div>\n                  <span className=\"text-muted-foreground text-xs\">Editor</span>\n                </li>\n              </ul>\n              <p className=\"text-muted-foreground text-sm\">\n                Invite teammates or adjust roles from settings.\n              </p>\n            </TabsContent>\n            <TabsContent value=\"billing\" className=\"mt-0 space-y-4\">\n              <div className=\"bg-muted/50 flex items-baseline justify-between rounded-lg border px-4 py-3\">\n                <div>\n                  <p className=\"text-sm font-medium\">Pro plan</p>\n                  <p className=\"text-muted-foreground text-xs\">\n                    Billed annually\n                  </p>\n                </div>\n                <p className=\"text-lg font-semibold tabular-nums\">$115/yr</p>\n              </div>\n              <p className=\"text-muted-foreground text-sm leading-relaxed\">\n                Renews on July 12. Update payment method or switch plans\n                anytime.\n              </p>\n            </TabsContent>\n          </div>\n        </Tabs>\n      </CardContent>\n    </Card>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/tabs/tabs-12.tsx"
    }
  ],
  "type": "registry:block"
}