@neon-ui

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

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

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

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

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

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

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

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

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

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

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.

Accessible text input primitive (Base UI).

Inline conversation status marker.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Form label primitive.

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

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

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

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

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

Status badge primitive (Base UI render pattern).

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

Chat bubble primitive with grouping and reactions.

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

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

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

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

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

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

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

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

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

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

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