DB Connection Card

Cards

About

A card for displaying a Postgres database connection with a pooled/direct toggle, role and database selectors, and switchable URI, psql, parameters, and agent-prompt views, with a shared password reveal and copy-to-clipboard.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds DB Connection Card to your project and fits it to your theme.

Code

How DB Connection Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { DBConnectionCard } from "@/components/ui/db-connection-card";

const connections = [
  {
    role: "neondb_owner",
    database: "neondb",
    pooled: true,
    uri: "postgres://neondb_owner:AbC123xyz@ep-cool-mountain-123456-pooler.us-east-2.aws.neon.tech/neondb?sslmode=require",
  },
  {
    role: "neondb_owner",
    database: "neondb",
    pooled: false,
    uri: "postgres://neondb_owner:AbC123xyz@ep-cool-mountain-123456.us-east-2.aws.neon.tech/neondb?sslmode=require",
  },
  {
    role: "readonly",
    database: "analytics",
    pooled: true,
    uri: "postgres://readonly:ZyX987abc@ep-cool-mountain-123456-pooler.us-east-2.aws.neon.tech/analytics?sslmode=require",
  },
  {
    role: "readonly",
    database: "analytics",
    pooled: false,
    uri: "postgres://readonly:ZyX987abc@ep-cool-mountain-123456.us-east-2.aws.neon.tech/analytics?sslmode=require",
  },
];

export default function DemoDBConnectionCard() {
  return (
    <div className="w-full max-w-md">
      <DBConnectionCard connections={connections} />
    </div>
  );
}