@neon-ui

Neon palette and design tokens for Tailwind v4.

Tailwind class-name merge helper used across neon-ui components.

Neon-themed button primitive with variants (Base UI).

Neon-themed card container primitive and its sub-parts.

Status badge primitive (Base UI render pattern).

shadcn chart primitives (Recharts container, tooltip, legend) themed to the Neon tokens.

Loading placeholder primitive.

Accessible tab navigation primitive (Base UI).

Base UI tooltip in the house chrome.

Noise-resolve loading indicator animated from the official Neon mark.

Form label primitive.

Accessible text input primitive (Base UI).

Accessible select primitive (Base UI).

Accessible switch primitive (Base UI).

Slider with elastic rubber-band drag and magnetic snap (by @iamncdai, MIT).

Model picker for agent chat input bars, grouped by provider.

Reasoning-effort selector: Off, Low, Medium, High.

Model picker with an embedded reasoning-effort slider in the popup footer.

Conversation message layout primitive with avatar, content, and footer.

Chat bubble primitive with grouping and reactions.

Inline conversation status marker.

Chat scroll container with turn anchoring, auto-follow, and jump-to-latest.

Compact running/complete/error indicator for one agent tool invocation.

Full agent chat pane: streamed markdown turns, tool chips, reasoning, and a composer with a model-controls slot.

Collapsible extended-thinking fold that opens itself while the model streams and settles to a timed receipt.

Collapsible step-by-step reasoning rail with statuses, search-result chips, and images.

Inline source pill that previews stacked citations on hover and links to the source on click.

Analytics card with a formatted value, signed delta, and interactive Visx sparkline.

Project health rollup on the MetricCard shell: an overall status pill and tint over a mono grid of supporting signals (latency, errors, uptime).

Shared Neon API client factory used by neon-ui data hooks.

Dot-and-label status vocabulary for apps and branches, with a billing PlanBadge companion.

Intentional dashed-border placeholder with title, description, icon, and action slots.

Tenant dashboard grid card composing the status vocabulary: name, badges, timestamp, one-link hover.

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).

Swatch-and-hex trigger opening an HSV field, hue rail, hex input, and preset swatches.

The describe-an-app bar: auto-growing prompt, free/paid plan segment, and a create action with an in-flight state.

The email/password card: mode switching, providers, structured errors, and a working state — Better Auth-shaped.

The neon.com hero as a live WebGL surface: clusters of thin vertical bars twinkling in green, teal, and blue.

The Neon brand-deck gradient as a live WebGL surface: a defocused warm color field drifting over near-black.

The neon.com banner dot pattern as a live WebGL surface: a square-dot grid sampling a drifting green-to-amber field.

Field of dots breathing in a drifting noise wave, colored by currentColor. The RegionSelect dot-map aesthetic as a background surface.

Halftone ring field revealed by soft drifting color blooms: teal and amber light behind a punched-metal screen.

Sandbox iframe with wake, restart, and refresh lifecycle, reload-on-signal, and chrome header.

Workspace tab bar with gliding underline, per-tab action slot, and pane crossfade.

Provisioning, waking, and error panel states composing NeonLoader with a live status detail line.

Floating server-info chip: region name, mono id, and a color-coded ping line.

Server location picker: an interactive dot-matrix world map synced with an accessible select.

Tilted 3D globe (globe.gl) with a monochrome relief surface, clickable region markers, and arc travel effects between regions.

Fetches a gateway model catalog and keeps the selection valid against it: explicit pick, then preferred default, then first available.

Measures browser round-trip latency to per-region endpoints via opaque no-cors requests.

A searchable branch selector with default/protected status and an inline create-branch affordance.

A drawn branch graph: nodes colored by compute state, curved edges to each parent, default and selected marked.

Autoscaling compute units over time against the min/max bounds, with a scrubable readout.

Virtualized, follow-tailing log pane with ANSI colors, level filters, search, and a retention cap.

Schema and row-level comparison between two branches with change counts, search, kind filters, and expandable DDL and word-level value diffs.

A collapsible Postgres schema tree: tables to columns, indexes, and relations, with types and a search.

A guarded SQL editor with run and cancel controls, inline Postgres errors, and a typed results grid.

Searchable recent SQL with status, timing, saved queries, expandable statements, copy, and rerun actions.

Checkpoint history rail with git sha, snapshot indicator, project id, restore with busy state, and empty state.

Neon database connection card: pooled/direct toggle, role and database selectors, URI / psql / parameters views, one shared secret reveal, and copy that always…

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…

A chronological feed of system events (provision, transfer, agent) on a status-vocabulary timeline, with expandable detail and optional per-entry actions.

Compact compute readout: lifecycle state (active/idle/scaling/suspended), autoscaling CU size, and scale-to-zero, in the house status vocabulary.

Base UI dialog in the house chrome: card panel, hairline border, quiet rise.

Destructive confirmation modal armed by press-and-hold, with keyboard hold support.

Single Neon consumption metric on the MetricCard shell: derives label, format, unit, total, sparkline, and delta from raw per-project samples.

Per-project consumption grid composing MetricCard, with plan-gated metrics and metering-lag notice.

Base UI popover in the house chrome.

Custom date range picker: mono pill trigger, preset rail, hand-built month grid with range wash.

Pricing dialog with drawn-check feature list and a processing upgrade action.

Create-project onboarding panel: project form on the left, the interactive region map on the right.

Types, unit conversion, allowances, and cost math for the Neon v2 consumption API.

Fetches consumption history through your own proxy route and shapes it into buckets and totals.

Interactive consumption time series with labelled axes, unit-aware totals, a scrubbable readout, and a legend that filters.

Storage composition by volume or by cost — root, child, instant restore, and snapshots as one bar with per-segment shares.

Invoice-shaped cost estimate: quantity by rate per metric, allowances shown, with an optional spending-limit meter.

Per-branch consumption attribution: sortable metric columns, magnitude rules, an expandable tail, and a list layout for a single metric.