184 Components
Database Connection Health Badge
CardsPrisma Accelerate and PlanetScale inspired database cluster health monitor with pooled connections gauge, regional ping latency, TLS 1.3 certificate status, and sanitized URI copying.
neon-edge-primary-01
ONLINEPostgreSQL 16.4
Round-Trip Latency
14ms
eu-central-1 (Frankfurt)Connection Pool
7/ 25 pooled
Transport Security
TLS 1.3 Active
Mutual TLS & VPC Isolatedpostgresql://cluster_admin:••••••••@eu-central-1.boseui.db/production
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/database-connection-health-badge.json"
Props
TypeScript props supported by <DatabaseConnectionHealthBadge />.
| Prop | Type | Default | Description |
|---|---|---|---|
| engine | string | "PostgreSQL 16.4" | Database engine and version string. |
| clusterName | string | "neon-edge-primary-01" | Database cluster identifier. |
| activeConnections | number | 7 | Currently open client connections. |
| maxPoolSize | number | 25 | Maximum pool connection limit. |
Key Features
- Live connection pool capacity meter with progress bar.
- Interactive ping test button with real-time latency fluctuations.
- TLS 1.3 SSL transport security status indicator.
- Copy sanitized connection URI with masked credentials.
Keyboard & Accessibility
- High-contrast health status badges with pulsing status dots.
- Full semantic markup with keyboard operable buttons.