Neon UI

Overview

Neon UI is the UI layer for building applications on Neon, the serverless Postgres platform, aimed at teams building agent platforms and database products. It provides components for database branching, connection strings, SQL, usage metering and project management, plus a set of agent chat components, all installed with the shadcn CLI.

The registry holds 77 items built on Base UI and Tailwind v4, using Hugeicons, Recharts and CodeMirror where needed. Neon UI is theme-first: pasting Tailwind variables into the theming page reskins every component live.

Features

• Agent UI: Agent chat pane with streamed turns, chain of thought, reasoning fold, inline citations, tool call chips and model pickers with a reasoning-effort slider.
• Platform: Branch picker, drawn branch tree, checkpoint timeline, API key list with reveal-once secrets and hold-to-revoke, and an activity feed.
• Connection card: Pooled or direct connection toggle with role and database selectors, plus URI, psql and agent-prompt views.
• Database tools: SQL runner with a typed results grid, schema explorer, query history, branch diff and a logs viewer with ANSI colors.
• Infrastructure: Autoscale chart, compute status, region select, region globe and provisioning status.
• Usage and billing: Usage panels, consumption charts, storage breakdown, cost estimates and a branch usage table.
• Backgrounds: Neon aurora, mesh gradient, dot matrix wave and halftone bloom.

Tech stack

• React, Base UI, Tailwind CSS v4, Recharts, motion, CodeMirror, Hugeicons

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @neon-ui/component-name