---
name: "@neon-ui"
slug: "neon-ui"
description: "Production-ready components for agent platforms built on Neon. Database branching, connection strings, usage metering and project management UI, built with Base UI and Tailwind v4."
category: "Animated components"
tags: ["3d", "ai", "animation", "auth", "backgrounds", "buttons", "cards", "charts", "forms", "hooks", "loaders", "maps", "navigation", "overlays", "tables"]
framework: "react"
license: "MIT"
author: "neondatabase"
website: "https://ui.neon.com"
github: "https://github.com/neondatabase/ui"
registry: "https://ui.neon.com/r/registry.json"
pro: false
pro_url: null
github_stars: 5
component_count: 77
generated_at: "2026-09-05T09:50:59.044Z"
---

# @neon-ui

Production-ready components for agent platforms built on Neon. Database branching, connection strings, usage metering and project management UI, built with Base UI and Tailwind v4.

## Links

- Website: https://ui.neon.com
- GitHub: https://github.com/neondatabase/ui
- Registry JSON: https://ui.neon.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/neon-ui
- This file: https://sh4dcn.vercel.app/md/neon-ui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://ui.neon.com/r/registry.json
pnpm dlx shadcn@latest add https://ui.neon.com/r/registry.json
bunx shadcn@latest add https://ui.neon.com/r/registry.json
# clone the source repo
git clone https://github.com/neondatabase/ui.git
# fetch the raw registry index
curl -s https://ui.neon.com/r/registry.json
```

## Components (77)

| name | type | description | install |
| --- | --- | --- | --- |
| neon-tokens | registry:style | Neon palette and design tokens for Tailwind v4. | `npx shadcn@latest add https://ui.neon.com/r/neon-tokens.json` |
| utils | registry:lib | Tailwind class-name merge helper used across neon-ui components. | `npx shadcn@latest add https://ui.neon.com/r/utils.json` |
| button | registry:ui | Neon-themed button primitive with variants (Base UI). | `npx shadcn@latest add https://ui.neon.com/r/button.json` |
| card | registry:ui | Neon-themed card container primitive and its sub-parts. | `npx shadcn@latest add https://ui.neon.com/r/card.json` |
| badge | registry:ui | Status badge primitive (Base UI render pattern). | `npx shadcn@latest add https://ui.neon.com/r/badge.json` |
| chart | registry:ui | shadcn chart primitives (Recharts container, tooltip, legend) themed to the Neon tokens. | `npx shadcn@latest add https://ui.neon.com/r/chart.json` |
| skeleton | registry:ui | Loading placeholder primitive. | `npx shadcn@latest add https://ui.neon.com/r/skeleton.json` |
| tabs | registry:ui | Accessible tab navigation primitive (Base UI). | `npx shadcn@latest add https://ui.neon.com/r/tabs.json` |
| tooltip | registry:ui | Base UI tooltip in the house chrome. | `npx shadcn@latest add https://ui.neon.com/r/tooltip.json` |
| neon-loader | registry:component | Noise-resolve loading indicator animated from the official Neon mark. | `npx shadcn@latest add https://ui.neon.com/r/neon-loader.json` |
| label | registry:ui | Form label primitive. | `npx shadcn@latest add https://ui.neon.com/r/label.json` |
| input | registry:ui | Accessible text input primitive (Base UI). | `npx shadcn@latest add https://ui.neon.com/r/input.json` |
| select | registry:ui | Accessible select primitive (Base UI). | `npx shadcn@latest add https://ui.neon.com/r/select.json` |
| switch | registry:ui | Accessible switch primitive (Base UI). | `npx shadcn@latest add https://ui.neon.com/r/switch.json` |
| elastic-slider | registry:ui | Slider with elastic rubber-band drag and magnetic snap (by @iamncdai, MIT). | `npx shadcn@latest add https://ui.neon.com/r/elastic-slider.json` |
| model-select | registry:component | Model picker for agent chat input bars, grouped by provider. | `npx shadcn@latest add https://ui.neon.com/r/model-select.json` |
| thinking-select | registry:component | Reasoning-effort selector: Off, Low, Medium, High. | `npx shadcn@latest add https://ui.neon.com/r/thinking-select.json` |
| thinking-model-select | registry:component | Model picker with an embedded reasoning-effort slider in the popup footer. | `npx shadcn@latest add https://ui.neon.com/r/thinking-model-select.json` |
| message | registry:ui | Conversation message layout primitive with avatar, content, and footer. | `npx shadcn@latest add https://ui.neon.com/r/message.json` |
| bubble | registry:ui | Chat bubble primitive with grouping and reactions. | `npx shadcn@latest add https://ui.neon.com/r/bubble.json` |
| marker | registry:ui | Inline conversation status marker. | `npx shadcn@latest add https://ui.neon.com/r/marker.json` |
| message-scroller | registry:ui | Chat scroll container with turn anchoring, auto-follow, and jump-to-latest. | `npx shadcn@latest add https://ui.neon.com/r/message-scroller.json` |
| tool-call-chip | registry:component | Compact running/complete/error indicator for one agent tool invocation. | `npx shadcn@latest add https://ui.neon.com/r/tool-call-chip.json` |
| agent-chat | registry:component | Full agent chat pane: streamed markdown turns, tool chips, reasoning, and a composer with a model-controls slot. | `npx shadcn@latest add https://ui.neon.com/r/agent-chat.json` |
| reasoning | registry:component | Collapsible extended-thinking fold that opens itself while the model streams and settles to a timed receipt. | `npx shadcn@latest add https://ui.neon.com/r/reasoning.json` |
| chain-of-thought | registry:component | Collapsible step-by-step reasoning rail with statuses, search-result chips, and images. | `npx shadcn@latest add https://ui.neon.com/r/chain-of-thought.json` |
| inline-citation | registry:component | Inline source pill that previews stacked citations on hover and links to the source on click. | `npx shadcn@latest add https://ui.neon.com/r/inline-citation.json` |
| metric-card | registry:component | Analytics card with a formatted value, signed delta, and interactive Visx sparkline. | `npx shadcn@latest add https://ui.neon.com/r/metric-card.json` |
| health-card | registry:component | Project health rollup on the MetricCard shell: an overall status pill and tint over a mono grid of supporting signals (latency, errors, uptime). | `npx shadcn@latest add https://ui.neon.com/r/health-card.json` |
| neon-client | registry:lib | Shared Neon API client factory used by neon-ui data hooks. | `npx shadcn@latest add https://ui.neon.com/r/neon-client.json` |
| status-badge | registry:component | Dot-and-label status vocabulary for apps and branches, with a billing PlanBadge companion. | `npx shadcn@latest add https://ui.neon.com/r/status-badge.json` |
| empty-state | registry:component | Intentional dashed-border placeholder with title, description, icon, and action slots. | `npx shadcn@latest add https://ui.neon.com/r/empty-state.json` |
| app-card | registry:component | Tenant dashboard grid card composing the status vocabulary: name, badges, timestamp, one-link hover. | `npx shadcn@latest add https://ui.neon.com/r/app-card.json` |
| animated-wash | registry:component | WebGL grain-gradient shader wash rising from the bottom edge, colored by currentColor with a hover lift. Adapted from paper-design/shaders (Apache-2.0). | `npx shadcn@latest add https://ui.neon.com/r/animated-wash.json` |
| color-picker | registry:component | Swatch-and-hex trigger opening an HSV field, hue rail, hex input, and preset swatches. | `npx shadcn@latest add https://ui.neon.com/r/color-picker.json` |
| app-creator | registry:component | The describe-an-app bar: auto-growing prompt, free/paid plan segment, and a create action with an in-flight state. | `npx shadcn@latest add https://ui.neon.com/r/app-creator.json` |
| auth-form | registry:component | The email/password card: mode switching, providers, structured errors, and a working state — Better Auth-shaped. | `npx shadcn@latest add https://ui.neon.com/r/auth-form.json` |
| neon-aurora | registry:component | The neon.com hero as a live WebGL surface: clusters of thin vertical bars twinkling in green, teal, and blue. | `npx shadcn@latest add https://ui.neon.com/r/neon-aurora.json` |
| mesh-gradient | registry:component | The Neon brand-deck gradient as a live WebGL surface: a defocused warm color field drifting over near-black. | `npx shadcn@latest add https://ui.neon.com/r/mesh-gradient.json` |
| banner-pattern | registry:component | The neon.com banner dot pattern as a live WebGL surface: a square-dot grid sampling a drifting green-to-amber field. | `npx shadcn@latest add https://ui.neon.com/r/banner-pattern.json` |
| dot-matrix-wave | registry:component | Field of dots breathing in a drifting noise wave, colored by currentColor. The RegionSelect dot-map aesthetic as a background surface. | `npx shadcn@latest add https://ui.neon.com/r/dot-matrix-wave.json` |
| halftone-bloom | registry:component | Halftone ring field revealed by soft drifting color blooms: teal and amber light behind a punched-metal screen. | `npx shadcn@latest add https://ui.neon.com/r/halftone-bloom.json` |
| preview-frame | registry:component | Sandbox iframe with wake, restart, and refresh lifecycle, reload-on-signal, and chrome header. | `npx shadcn@latest add https://ui.neon.com/r/preview-frame.json` |
| workspace-tabs | registry:component | Workspace tab bar with gliding underline, per-tab action slot, and pane crossfade. | `npx shadcn@latest add https://ui.neon.com/r/workspace-tabs.json` |
| provisioning-status | registry:component | Provisioning, waking, and error panel states composing NeonLoader with a live status detail line. | `npx shadcn@latest add https://ui.neon.com/r/provisioning-status.json` |
| region-card | registry:component | Floating server-info chip: region name, mono id, and a color-coded ping line. | `npx shadcn@latest add https://ui.neon.com/r/region-card.json` |
| region-select | registry:component | Server location picker: an interactive dot-matrix world map synced with an accessible select. | `npx shadcn@latest add https://ui.neon.com/r/region-select.json` |
| region-globe | registry:component | Tilted 3D globe (globe.gl) with a monochrome relief surface, clickable region markers, and arc travel effects between regions. | `npx shadcn@latest add https://ui.neon.com/r/region-globe.json` |
| use-gateway-models | registry:hook | Fetches a gateway model catalog and keeps the selection valid against it: explicit pick, then preferred default, then first available. | `npx shadcn@latest add https://ui.neon.com/r/use-gateway-models.json` |
| use-region-ping | registry:hook | Measures browser round-trip latency to per-region endpoints via opaque no-cors requests. | `npx shadcn@latest add https://ui.neon.com/r/use-region-ping.json` |
| branch-picker | registry:component | A searchable branch selector with default/protected status and an inline create-branch affordance. | `npx shadcn@latest add https://ui.neon.com/r/branch-picker.json` |
| branch-tree | registry:component | A drawn branch graph: nodes colored by compute state, curved edges to each parent, default and selected marked. | `npx shadcn@latest add https://ui.neon.com/r/branch-tree.json` |
| autoscale-chart | registry:component | Autoscaling compute units over time against the min/max bounds, with a scrubable readout. | `npx shadcn@latest add https://ui.neon.com/r/autoscale-chart.json` |
| logs-viewer | registry:component | Virtualized, follow-tailing log pane with ANSI colors, level filters, search, and a retention cap. | `npx shadcn@latest add https://ui.neon.com/r/logs-viewer.json` |
| branch-diff | registry:component | Schema and row-level comparison between two branches with change counts, search, kind filters, and expandable DDL and word-level value diffs. | `npx shadcn@latest add https://ui.neon.com/r/branch-diff.json` |
| schema-explorer | registry:component | A collapsible Postgres schema tree: tables to columns, indexes, and relations, with types and a search. | `npx shadcn@latest add https://ui.neon.com/r/schema-explorer.json` |
| sql-runner | registry:component | A guarded SQL editor with run and cancel controls, inline Postgres errors, and a typed results grid. | `npx shadcn@latest add https://ui.neon.com/r/sql-runner.json` |
| query-history | registry:component | Searchable recent SQL with status, timing, saved queries, expandable statements, copy, and rerun actions. | `npx shadcn@latest add https://ui.neon.com/r/query-history.json` |
| checkpoint-timeline | registry:component | Checkpoint history rail with git sha, snapshot indicator, project id, restore with busy state, and empty state. | `npx shadcn@latest add https://ui.neon.com/r/checkpoint-timeline.json` |
| db-connection-card | registry:component | Neon database connection card: pooled/direct toggle, role and database selectors, URI / psql / parameters views, one shared secret reveal, and copy that always… | `npx shadcn@latest add https://ui.neon.com/r/db-connection-card.json` |
| api-key-list | registry:component | Create, reveal-once, and revoke Neon API keys (personal and organization), with an inline create flow, a one-time secret reveal, and per-row revoke confirmatio… | `npx shadcn@latest add https://ui.neon.com/r/api-key-list.json` |
| activity-feed | registry:component | A chronological feed of system events (provision, transfer, agent) on a status-vocabulary timeline, with expandable detail and optional per-entry actions. | `npx shadcn@latest add https://ui.neon.com/r/activity-feed.json` |
| compute-status | registry:component | Compact compute readout: lifecycle state (active/idle/scaling/suspended), autoscaling CU size, and scale-to-zero, in the house status vocabulary. | `npx shadcn@latest add https://ui.neon.com/r/compute-status.json` |
| dialog | registry:ui | Base UI dialog in the house chrome: card panel, hairline border, quiet rise. | `npx shadcn@latest add https://ui.neon.com/r/dialog.json` |
| confirm-dialog | registry:component | Destructive confirmation modal armed by press-and-hold, with keyboard hold support. | `npx shadcn@latest add https://ui.neon.com/r/confirm-dialog.json` |
| usage-card | registry:component | Single Neon consumption metric on the MetricCard shell: derives label, format, unit, total, sparkline, and delta from raw per-project samples. | `npx shadcn@latest add https://ui.neon.com/r/usage-card.json` |
| usage-panel | registry:component | Per-project consumption grid composing MetricCard, with plan-gated metrics and metering-lag notice. | `npx shadcn@latest add https://ui.neon.com/r/usage-panel.json` |
| popover | registry:ui | Base UI popover in the house chrome. | `npx shadcn@latest add https://ui.neon.com/r/popover.json` |
| date-range-picker | registry:component | Custom date range picker: mono pill trigger, preset rail, hand-built month grid with range wash. | `npx shadcn@latest add https://ui.neon.com/r/date-range-picker.json` |
| upgrade-dialog | registry:component | Pricing dialog with drawn-check feature list and a processing upgrade action. | `npx shadcn@latest add https://ui.neon.com/r/upgrade-dialog.json` |
| create-project | registry:block | Create-project onboarding panel: project form on the left, the interactive region map on the right. | `npx shadcn@latest add https://ui.neon.com/r/create-project.json` |
| consumption | registry:lib | Types, unit conversion, allowances, and cost math for the Neon v2 consumption API. | `npx shadcn@latest add https://ui.neon.com/r/consumption.json` |
| use-consumption-history | registry:hook | Fetches consumption history through your own proxy route and shapes it into buckets and totals. | `npx shadcn@latest add https://ui.neon.com/r/use-consumption-history.json` |
| consumption-chart | registry:component | Interactive consumption time series with labelled axes, unit-aware totals, a scrubbable readout, and a legend that filters. | `npx shadcn@latest add https://ui.neon.com/r/consumption-chart.json` |
| storage-breakdown | registry:component | Storage composition by volume or by cost — root, child, instant restore, and snapshots as one bar with per-segment shares. | `npx shadcn@latest add https://ui.neon.com/r/storage-breakdown.json` |
| cost-estimate-card | registry:component | Invoice-shaped cost estimate: quantity by rate per metric, allowances shown, with an optional spending-limit meter. | `npx shadcn@latest add https://ui.neon.com/r/cost-estimate-card.json` |
| branch-usage-table | registry:component | Per-branch consumption attribution: sortable metric columns, magnitude rules, an expandable tail, and a list layout for a single metric. | `npx shadcn@latest add https://ui.neon.com/r/branch-usage-table.json` |

## For AI agents

```text
You are adding components from @neon-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/neon-ui.md) for the component list.
2. Fetch the machine-readable index: https://ui.neon.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: neon-ui).
```