4f: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"] 50: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"] 51: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"] 52:T5198,"use client"; import { Copy01Icon, Tick02Icon, ViewIcon, ViewOffSlashIcon, } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import { Fragment, useEffect, useRef, useState } from "react"; import type { ComponentProps, ReactElement, ReactNode } from "react"; import { Button } from "@/components/ui/button"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Skeleton } from "@/components/ui/skeleton"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; const COPY_FLASH_MS = 1500; const MASK = "\u2022\u2022\u2022\u2022\u2022"; const DEFAULT_PORT = "5432"; type ConnectionFormat = "uri" | "psql" | "params" | "agent"; export interface ConnectionSelection { role: string; database: string; /** Pooled (PgBouncer) connection when true, direct when false. */ pooled: boolean; } export interface ConnectionEntry extends ConnectionSelection { /** The full connection string for this role/database/pooled combination. */ uri: string; } interface ConnectionParams { host: string; port: string; database: string; user: string; password: string; } interface ParsedUri { /** scheme + role, up to the password. */ head: string; password: string; /** From the at-sign on: host, database, and query. */ tail: string; } /** Split so only the password needs hiding. Null when not URL-shaped. */ const parseUri = (uri: string): ParsedUri | null => { try { const url = new URL(uri); if (!url.password) { return null; } return { head: `${url.protocol}//${decodeURIComponent(url.username)}:`, password: decodeURIComponent(url.password), tail: uri.slice(uri.indexOf("@")), }; } catch { return null; } }; const parseParams = (uri: string): ConnectionParams | null => { try { const url = new URL(uri); return { database: url.pathname.replace(/^\//u, ""), host: url.hostname, password: decodeURIComponent(url.password), port: url.port || DEFAULT_PORT, user: decodeURIComponent(url.username), }; } catch { return null; } }; /** A paste-ready agent prompt, secret excluded: point the agent at the env var. */ const buildAgentPrompt = (params: ConnectionParams | null, pooled: boolean) => { if (!params) { return ""; } return [ "Connect to a Neon Postgres database.", "Read the connection string from the DATABASE_URL environment variable; never hardcode credentials.", "", `host: ${params.host}`, `database: ${params.database}`, `role: ${params.user}`, `connection: ${pooled ? "pooled (PgBouncer)" : "direct"}, SSL required`, ].join("\n"); }; const unique = (values: string[]) => [...new Set(values)]; /** The longest option; in a mono font the longest string is also the widest. */ const widestOption = (options: string[]) => { let widest = ""; for (const option of options) { if (option.length > widest.length) { widest = option; } } return widest; }; const matches = (entry: ConnectionEntry, selection: ConnectionSelection) => entry.role === selection.role && entry.database === selection.database && entry.pooled === selection.pooled; /** Hover/focus label for an icon-only control. */ const IconTooltip = ({ label, children, }: { label: string; children: ReactElement; }) => ( {label} ); /* ───────────────────────────────────────────────────────── * A copy that carries the real value and flashes a primary * check for 1.5s, announcing through a polite live region. * ───────────────────────────────────────────────────────── */ const CopyButton = ({ value, label }: { value: string; label: string }) => { const [copied, setCopied] = useState(false); const copy = async () => { setCopied(true); window.setTimeout(() => setCopied(false), COPY_FLASH_MS); try { await navigator.clipboard.writeText(value); } catch { // Clipboard unavailable (blur, permissions); the feedback still shows. } }; return (

{copied ? `${label} copied` : ""}

); }; /** The connection URI with only the password hidden; masks whole if not URL-shaped. */ const UriText = ({ uri, revealed }: { uri: string; revealed: boolean }) => { const parsed = parseUri(uri); if (!parsed) { return revealed ? uri : MASK; } return ( <> {parsed.head} {revealed ? parsed.password : MASK} {parsed.tail} ); }; const secretRowClassName = "flex min-w-0 items-center gap-1 rounded-md border border-border/60 bg-background py-1.5 pr-1 pl-2.5 transition-colors hover:border-border has-[:focus-visible]:border-primary/50 has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-primary/15"; const panelClassName = "fade-in-0 slide-in-from-bottom-1 animate-in duration-200 motion-reduce:animate-none"; const codeClassName = "min-w-0 flex-1 truncate font-mono text-[11px] leading-relaxed"; const SecretRow = ({ copyLabel, copyValue, children, }: { copyLabel: string; copyValue: string; children: ReactNode; }) => (

{children}

); const ParamsView = ({ params, revealed, }: { params: ConnectionParams | null; revealed: boolean; }) => { if (!params) { return (

no connection string

); } const rows: [string, string][] = [ ["host", params.host], ["port", params.port], ["database", params.database], ["user", params.user], ]; return (

{key}: {value}
password: {revealed ? params.password : MASK}

); }; const SelectField = ({ caption, value, options, onChange, }: { caption: string; value: string; options: string[]; onChange: (next: string) => void; }) => { if (options.length <= 1) { return ( {caption} {value} ); } return ( ); }; const MODES = [ { hint: "Routes through PgBouncer. Best for serverless functions and many short-lived connections.", label: "pooled", pooled: true, }, { hint: "Connects straight to the compute. Use it for migrations, long-lived clients, and session features like LISTEN/NOTIFY.", label: "direct", pooled: false, }, ] as const; const ModeToggle = ({ pooled, onSelect, }: { pooled: boolean; onSelect: (pooled: boolean) => void; }) => (

Connection mode {MODES.map((mode) => ( onSelect(mode.pooled)} type="button" > {mode.label} } /> {mode.hint} ))}

); const FORMATS: { value: ConnectionFormat; label: string }[] = [ { label: "URI", value: "uri" }, { label: "psql", value: "psql" }, { label: "Parameters", value: "params" }, { label: "Agent", value: "agent" }, ]; /** * Animate the panel area's height as its content changes size (URI and psql * are one row; parameters is a grid). Measures the live content and transitions * `height`, so the card grows and shrinks smoothly instead of jumping. */ const AnimatedHeight = ({ children }: { children: ReactNode }) => { const innerRef = useRef(null); const [height, setHeight] = useState(); useEffect(() => { const inner = innerRef.current; if (!inner) { return; } const observer = new ResizeObserver(() => setHeight(inner.offsetHeight)); observer.observe(inner); setHeight(inner.offsetHeight); return () => observer.disconnect(); }, []); return (

{children}

); }; const RevealButton = ({ revealed, onToggle, }: { revealed: boolean; onToggle: () => void; }) => ( ); const SelectorRow = ({ roleOptions, databaseOptions, role, database, onRole, onDatabase, }: { roleOptions: string[]; databaseOptions: string[]; role: string; database: string; onRole: (next: string) => void; onDatabase: (next: string) => void; }) => { if (roleOptions.length === 0 && databaseOptions.length === 0) { return null; } return (

{roleOptions.length > 0 ? ( ) : null} {databaseOptions.length > 0 ? ( ) : null}

); }; const FormatTabs = ({ format, onFormat, revealed, onToggleReveal, uri, psql, params, agentPrompt, secret, }: { format: ConnectionFormat; onFormat: (format: ConnectionFormat) => void; revealed: boolean; onToggleReveal: () => void; uri: string; psql: string; params: ConnectionParams | null; agentPrompt: string; secret: ReactNode; }) => ( onFormat(next as ConnectionFormat)} value={format} >

{FORMATS.map((entry) => ( {entry.label} ))} {format === "agent" ? null : ( )}

{secret} psql '{secret}'

{agentPrompt}

password excluded; the agent reads DATABASE_URL

); export type DBConnectionCardProps = Omit< ComponentProps<"div">, "children" | "onChange" > & { /** Card title. */ label?: string; /** * Every connection string, one per role/database/pooled combination. The * consumer owns the secret: prefetch the URIs server-side and pass them as * plain data. Roles, databases, and the pooled toggle are derived from this. */ connections: ConnectionEntry[]; /** Order or limit the role options; defaults to those found in connections. */ roles?: string[]; /** Order or limit the database options; defaults to those found in connections. */ databases?: string[]; defaultRole?: string; defaultDatabase?: string; /** Start on the pooled connection. */ defaultPooled?: boolean; /** Force the pooled/direct toggle; defaults to on when both kinds exist. */ poolable?: boolean; /** Notified when the role, database, or mode changes. */ onSelectionChange?: (selection: ConnectionSelection) => void; isLoading?: boolean; }; const cardClassName = "flex w-full min-w-0 flex-col gap-3 rounded-lg border border-border/60 bg-card p-4 shadow-none ring-0"; const LoadingCard = ({ className, ...props }: ComponentProps<"div">) => (

); export const DBConnectionCard = ({ label = "Database connection", connections, roles, databases, defaultRole, defaultDatabase, defaultPooled = false, poolable, onSelectionChange, isLoading = false, className, ...props }: DBConnectionCardProps) => { const roleOptions = roles ?? unique(connections.map((entry) => entry.role)); const databaseOptions = databases ?? unique(connections.map((entry) => entry.database)); const showToggle = poolable ?? (connections.some((entry) => entry.pooled) && connections.some((entry) => !entry.pooled)); const [role, setRole] = useState(defaultRole ?? roleOptions[0] ?? ""); const [database, setDatabase] = useState( defaultDatabase ?? databaseOptions[0] ?? "" ); const [pooled, setPooled] = useState(defaultPooled); const [revealed, setRevealed] = useState(false); const [format, setFormat] = useState("uri"); const commit = (next: ConnectionSelection) => { setRole(next.role); setDatabase(next.database); setPooled(next.pooled); onSelectionChange?.(next); }; if (isLoading) { return ; } const selection: ConnectionSelection = { database, pooled, role }; const uri = connections.find((entry) => matches(entry, selection))?.uri ?? ""; const psql = uri ? `psql '${uri}'` : ""; const params = uri ? parseParams(uri) : null; const agentPrompt = buildAgentPrompt(params, pooled); const secret = ; return (

{label}

{showToggle ? ( commit({ ...selection, pooled: next })} pooled={pooled} /> ) : null}

commit({ ...selection, database: next })} onRole={(next) => commit({ ...selection, role: next })} role={role} roleOptions={roleOptions} /> setRevealed((current) => !current)} params={params} psql={psql} revealed={revealed} secret={secret} uri={uri} />

); }; 4b:["$","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","@hugeicons/react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Freact","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":"@hugeicons/react"}]]}]}],["$","li","@hugeicons/core-free-icons",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Fcore-free-icons","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":"@hugeicons/core-free-icons"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":["utils","https://ui.neon.com/r/button.json","https://ui.neon.com/r/select.json","https://ui.neon.com/r/tabs.json","https://ui.neon.com/r/skeleton.json","https://ui.neon.com/r/neon-tokens.json","https://ui.neon.com/r/tooltip.json"]}]]}],["$","$L50",null,{"sourceUrl":"https://ui.neon.com/r/db-connection-card.json","proxyUrl":"https://shadcnregistry.com/r/neon-ui/db-connection-card","itemId":"@neon-ui/db-connection-card"}],["$","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"}],["$","$L51",null,{"files":[{"path":"src/components/db-connection-card/db-connection-card.tsx","content":"$52","type":"registry:component"}]}]]}],"$L53"]}]

DBConnectionCard

Installation

Files

components

Styles