{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "settings-3",
  "title": "Tabbed Account Billing Team",
  "description": "Tabbed settings page splitting Account profile fields, a Billing plan and payment method card, and a Team members table with roles.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "avatar",
    "badge",
    "button",
    "card",
    "field",
    "input",
    "separator",
    "sonner",
    "switch",
    "table",
    "tabs"
  ],
  "files": [
    {
      "path": "registry/blocks/settings/3/settings-block.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n} from \"@/components/ui/field\"\nimport { Input } from \"@/components/ui/input\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { Switch } from \"@/components/ui/switch\"\nimport { Toaster } from \"@/components/ui/sonner\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\"\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nconst teamMembers = [\n  {\n    name: \"Ada Lovelace\",\n    email: \"ada@acme.com\",\n    initials: \"AL\",\n    avatar: \"https://i.pravatar.cc/150?img=47\",\n    role: \"Owner\",\n    roleVariant: \"default\" as const,\n  },\n  {\n    name: \"Grace Hopper\",\n    email: \"grace@acme.com\",\n    initials: \"GH\",\n    avatar: \"https://i.pravatar.cc/150?img=45\",\n    role: \"Admin\",\n    roleVariant: \"secondary\" as const,\n  },\n  {\n    name: \"Alan Turing\",\n    email: \"alan@acme.com\",\n    initials: \"AT\",\n    avatar: \"https://i.pravatar.cc/150?img=12\",\n    role: \"Member\",\n    roleVariant: \"outline\" as const,\n  },\n  {\n    name: \"Katherine Johnson\",\n    email: \"katherine@acme.com\",\n    initials: \"KJ\",\n    avatar: \"https://i.pravatar.cc/150?img=49\",\n    role: \"Member\",\n    roleVariant: \"outline\" as const,\n  },\n]\n\nconst planFeatures = [\n  \"Unlimited projects\",\n  \"Priority support\",\n  \"Advanced analytics\",\n]\n\nexport default function SettingsBlock() {\n  const [marketingEmails, setMarketingEmails] = useState(true)\n  const [fullName, setFullName] = useState(\"Ada Lovelace\")\n  const [email, setEmail] = useState(\"ada@acme.com\")\n\n  function saveChanges() {\n    toast.success(\"Profile saved\", {\n      id: \"profile-saved\",\n      description: \"Your account details have been updated.\",\n    })\n  }\n\n  function inviteMember() {\n    toast.success(\"Invitation sent\", {\n      id: \"invitation-sent\",\n      description: \"We emailed an invite to join the Acme workspace.\",\n    })\n  }\n\n  function changePlan() {\n    toast(\"Plans available\", {\n      id: \"plans-available\",\n      description: \"Compare plans and pick the one that fits your team.\",\n    })\n  }\n\n  function cancelSubscription() {\n    toast.error(\"Subscription canceled\", {\n      id: \"subscription-canceled\",\n      description: \"Your Pro plan stays active until Jan 1, 2027.\",\n    })\n  }\n\n  function updatePayment() {\n    toast.success(\"Payment method updated\", {\n      id: \"payment-updated\",\n      description: \"Future charges will use your new card.\",\n    })\n  }\n\n  return (\n    <section className=\"flex min-h-svh w-full justify-center bg-muted/30 px-6 py-16 text-foreground\">\n      <div className=\"flex w-full max-w-3xl flex-col gap-8\">\n        <header className=\"flex flex-col gap-1\">\n          <h1 className=\"font-heading text-2xl font-bold tracking-tight\">\n            Settings\n          </h1>\n          <p className=\"text-sm text-muted-foreground\">\n            Manage your account, billing, and team for Acme.\n          </p>\n        </header>\n\n        <Tabs defaultValue=\"account\" className=\"gap-6\">\n          <TabsList className=\"w-full sm:w-auto\">\n            <TabsTrigger value=\"account\">Account</TabsTrigger>\n            <TabsTrigger value=\"billing\">Billing</TabsTrigger>\n            <TabsTrigger value=\"team\">Team</TabsTrigger>\n          </TabsList>\n\n          <TabsContent value=\"account\">\n            <Card>\n              <CardHeader>\n                <CardTitle>Profile</CardTitle>\n                <CardDescription>\n                  Update your personal details and preferences.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className=\"flex flex-col gap-6\">\n                <Field>\n                  <FieldLabel htmlFor=\"full-name\">Full name</FieldLabel>\n                  <Input\n                    id=\"full-name\"\n                    value={fullName}\n                    onChange={(e) => setFullName(e.target.value)}\n                    placeholder=\"Your name\"\n                  />\n                </Field>\n\n                <Field>\n                  <FieldLabel htmlFor=\"email\">Email address</FieldLabel>\n                  <Input\n                    id=\"email\"\n                    type=\"email\"\n                    value={email}\n                    onChange={(e) => setEmail(e.target.value)}\n                    placeholder=\"you@acme.com\"\n                  />\n                  <FieldDescription>\n                    Used for sign-in and account notices.\n                  </FieldDescription>\n                </Field>\n\n                <Separator />\n\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldLabel htmlFor=\"marketing-emails\">\n                      Marketing emails\n                    </FieldLabel>\n                    <FieldDescription>\n                      Receive product news and occasional offers.\n                    </FieldDescription>\n                  </FieldContent>\n                  <Switch\n                    id=\"marketing-emails\"\n                    checked={marketingEmails}\n                    onCheckedChange={setMarketingEmails}\n                  />\n                </Field>\n\n                <div className=\"flex justify-end\">\n                  <Button onClick={saveChanges}>Save Changes</Button>\n                </div>\n              </CardContent>\n            </Card>\n          </TabsContent>\n\n          <TabsContent value=\"billing\">\n            <div className=\"flex flex-col gap-6\">\n              <Card>\n                <CardHeader>\n                  <div className=\"flex items-start justify-between gap-4\">\n                    <div className=\"flex flex-col gap-1\">\n                      <CardTitle>Pro plan</CardTitle>\n                      <CardDescription>\n                        Billed annually, renews Jan 1, 2027.\n                      </CardDescription>\n                    </div>\n                    <Badge variant=\"secondary\">\n                      <IconPlaceholder\n                        lucide=\"Check\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                        phosphor=\"Check\"\n                        remixicon=\"RiCheckLine\"\n                        data-icon=\"inline-start\"\n                      />\n                      Active\n                    </Badge>\n                  </div>\n                </CardHeader>\n                <CardContent className=\"flex flex-col gap-6\">\n                  <div className=\"flex items-baseline gap-1\">\n                    <span className=\"text-3xl font-bold tracking-tight\">\n                      $24\n                    </span>\n                    <span className=\"text-sm text-muted-foreground\">\n                      / month\n                    </span>\n                  </div>\n\n                  <ul className=\"flex flex-col gap-2\">\n                    {planFeatures.map((feature) => (\n                      <li\n                        key={feature}\n                        className=\"flex items-center gap-2 text-sm\"\n                      >\n                        <span className=\"flex size-5 items-center justify-center rounded-md bg-primary/10 text-primary\">\n                          <IconPlaceholder\n                            lucide=\"Check\"\n                            tabler=\"IconCheck\"\n                            hugeicons=\"Tick02Icon\"\n                            phosphor=\"Check\"\n                            remixicon=\"RiCheckLine\"\n                            className=\"size-3.5\"\n                          />\n                        </span>\n                        {feature}\n                      </li>\n                    ))}\n                  </ul>\n\n                  <div className=\"flex flex-wrap gap-3\">\n                    <Button variant=\"outline\" onClick={changePlan}>\n                      Change Plan\n                    </Button>\n                    <Button variant=\"ghost\" onClick={cancelSubscription}>\n                      Cancel Subscription\n                    </Button>\n                  </div>\n                </CardContent>\n              </Card>\n\n              <Card>\n                <CardHeader>\n                  <CardTitle>Payment method</CardTitle>\n                  <CardDescription>\n                    The card charged for your subscription.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div className=\"flex items-center justify-between gap-4 rounded-lg border border-border p-4\">\n                    <div className=\"flex items-center gap-3\">\n                      <span className=\"flex size-10 items-center justify-center rounded-md bg-muted text-muted-foreground\">\n                        <IconPlaceholder\n                          lucide=\"CreditCard\"\n                          tabler=\"IconCreditCard\"\n                          hugeicons=\"CreditCardIcon\"\n                          phosphor=\"CreditCard\"\n                          remixicon=\"RiBankCardLine\"\n                          className=\"size-5\"\n                        />\n                      </span>\n                      <div className=\"flex flex-col\">\n                        <span className=\"text-sm font-medium\">\n                          Visa ending in 4242\n                        </span>\n                        <span className=\"text-xs text-muted-foreground\">\n                          Expires 08 / 2028\n                        </span>\n                      </div>\n                    </div>\n                    <Button variant=\"outline\" size=\"sm\" onClick={updatePayment}>\n                      Update\n                    </Button>\n                  </div>\n                </CardContent>\n              </Card>\n            </div>\n          </TabsContent>\n\n          <TabsContent value=\"team\">\n            <Card>\n              <CardHeader>\n                <div className=\"flex flex-wrap items-start justify-between gap-4\">\n                  <div className=\"flex flex-col gap-1\">\n                    <CardTitle>Team members</CardTitle>\n                    <CardDescription>\n                      People with access to the Acme workspace.\n                    </CardDescription>\n                  </div>\n                  <Button size=\"sm\" onClick={inviteMember}>\n                    <IconPlaceholder\n                      lucide=\"Mail\"\n                      tabler=\"IconMail\"\n                      hugeicons=\"MailIcon\"\n                      phosphor=\"Envelope\"\n                      remixicon=\"RiMailLine\"\n                      data-icon=\"inline-start\"\n                    />\n                    Invite Member\n                  </Button>\n                </div>\n              </CardHeader>\n              <CardContent>\n                <Table>\n                  <TableHeader>\n                    <TableRow>\n                      <TableHead>Member</TableHead>\n                      <TableHead className=\"hidden sm:table-cell\">\n                        Email\n                      </TableHead>\n                      <TableHead className=\"text-right\">Role</TableHead>\n                    </TableRow>\n                  </TableHeader>\n                  <TableBody>\n                    {teamMembers.map((member) => (\n                      <TableRow key={member.email}>\n                        <TableCell>\n                          <div className=\"flex items-center gap-3\">\n                            <Avatar className=\"size-8\">\n                              <AvatarImage\n                                src={member.avatar}\n                                alt={member.name}\n                                className=\"grayscale\"\n                              />\n                              <AvatarFallback className=\"text-xs\">\n                                {member.initials}\n                              </AvatarFallback>\n                            </Avatar>\n                            <div className=\"flex flex-col\">\n                              <span className=\"font-medium\">{member.name}</span>\n                              <span className=\"text-xs text-muted-foreground sm:hidden\">\n                                {member.email}\n                              </span>\n                            </div>\n                          </div>\n                        </TableCell>\n                        <TableCell className=\"hidden text-muted-foreground sm:table-cell\">\n                          {member.email}\n                        </TableCell>\n                        <TableCell className=\"text-right\">\n                          <Badge variant={member.roleVariant}>\n                            {member.role === \"Owner\" ? (\n                              <IconPlaceholder\n                                lucide=\"User\"\n                                tabler=\"IconUser\"\n                                hugeicons=\"UserIcon\"\n                                phosphor=\"User\"\n                                remixicon=\"RiUserLine\"\n                                data-icon=\"inline-start\"\n                              />\n                            ) : null}\n                            {member.role}\n                          </Badge>\n                        </TableCell>\n                      </TableRow>\n                    ))}\n                  </TableBody>\n                </Table>\n              </CardContent>\n            </Card>\n          </TabsContent>\n        </Tabs>\n      </div>\n      <Toaster />\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/settings-3.tsx"
    }
  ],
  "meta": {
    "height": "663px",
    "tier": "free"
  },
  "categories": [
    "settings"
  ],
  "type": "registry:block"
}