neon-ui

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

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

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

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.

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

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.

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

Status badge primitive (Base UI render pattern).

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

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

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.

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

Chat bubble primitive with grouping and reactions.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

Accessible text input primitive (Base UI).

Form label primitive.

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

Inline conversation status marker.

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

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

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

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

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

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

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