50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T3934,"use client"; import { useState } from "react"; import { toast } from "sonner"; import { KeyRound, Plus, Copy, RefreshCcw, Trash2, MoreHorizontal, GitBranch, MessagesSquare, Webhook, Landmark, CreditCard, } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"; import { Progress } from "@/components/ui/progress"; import { Switch } from "@/components/ui/switch"; import { Separator } from "@/components/ui/separator"; import { Field, FieldLabel } from "@/components/ui/field"; import { Input } from "@/components/ui/input"; import { Item, ItemGroup, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemSeparator, } from "@/components/ui/item"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Toaster } from "@/components/ui/sonner"; const apiKeys = [ { name: "Production key", key: "sk_live_51N••••••••••••••••8f2k", created: "Created Jan 12, 2026", lastUsed: "Last used 2 hours ago", }, { name: "Staging key", key: "sk_test_4hP••••••••••••••••a91x", created: "Created Nov 3, 2025", lastUsed: "Last used 3 days ago", }, { name: "CI / automation key", key: "sk_test_9zQ••••••••••••••••c47r", created: "Created Sep 21, 2025", lastUsed: "Never used", }, ]; const integrations = [ { name: "GitHub", description: "Sync deployments and issues with your repositories.", icon: GitBranch, connected: true, }, { name: "Slack", description: "Get usage alerts and billing notifications in Slack.", icon: MessagesSquare, connected: true, }, { name: "Webhooks", description: "Send real-time events to your own endpoints.", icon: Webhook, connected: false, }, { name: "Accounting sync", description: "Export invoices and usage to your ledger automatically.", icon: Landmark, connected: false, }, ]; const AccountSetting1 = () => { const [hasCard, setHasCard] = useState(true); const copyKey = (key: string) => { navigator.clipboard?.writeText(key); toast.success("API key copied to clipboard"); }; return (

Account Settings Manage your API keys, integrations, and billing details. API Keys Integrations Billing {/* ---------------- API Keys ---------------- */}

API usage this month

8,420 / 10,000 requests

Usage resets on Aug 1, 2026.

Your API keys

{apiKeys.map((item, index) => (

{item.name} Active {item.key} {item.created} · {item.lastUsed} } /> copyKey(item.key)}> Copy key Regenerate Revoke key {index < apiKeys.length - 1 && }

))}

{/* ---------------- Integrations ---------------- */}

{integrations.map((integration) => (

{integration.name}

{integration.connected ? "Connected" : "Not connected"}

{integration.description}

))}

{/* ---------------- Billing ---------------- */}

Payment method

{hasCard ? (

•••• •••• •••• 4242

Expires 08/27

) : (

No payment method on file

Add a card to keep your subscription active without interruption.

)}

Current plan

Pro plan

$49/month · renews Aug 1, 2026

); }; const AddCardDialog = ({ onSave }: { onSave: () => void }) => { return ( Add payment method Your card details are encrypted and processed securely.

CardHolder Name Card Number

Expiry CVC

Cancel} /> { onSave(); toast.success("Payment method saved"); }} > Save card } /> ); }; export default AccountSetting1; 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","sonner",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/sonner","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"sonner"}]]}]}]]}],["$","$L50",null,{"registryDependencies":["card","field","input","button","badge","progress","switch","separator","item","dropdown-menu","dialog","sonner","tabs"]}]]}],["$","$L51",null,{"sourceUrl":"https://shadcndashboard.dev/r/account-setting-1.json","proxyUrl":"https://shadcnregistry.com/r/shadcn-dashboard/account-setting-1","itemId":"@shadcn-dashboard/account-setting-1"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"src/components/shadcn-dashboard/blocks/account-setting/account-setting-1.tsx","content":"$53","type":"registry:component","target":"components/shadcn-dashboard/blocks/account-setting/account-setting-1.tsx"}]}]]}],"$L54"]}]

Account Setting 01 API Keys & Billing Settings

Installation

Files

components

Styles