neon-ui

Also in the neon-ui registry

Copy a prompt for your agent, copy the install command, or open the docs that ship it.

• ActivityFeed

  activity-feed

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

  @hugeicons/react, @hugeicons/core-free-icons1 file
  PromptCopy

• AgentChat

  agent-chat

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

  ai, @ai-sdk/react, streamdown, @hugeicons/react1 file
  PromptCopy

• AnimatedWash

  animated-wash

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

  utils2 files
  PromptCopy

• ApiKeyList

  api-key-list

  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.

  @hugeicons/react, @hugeicons/core-free-icons1 file
  PromptCopy

• AppCard

  app-card

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

  @hugeicons/react, @hugeicons/core-free-icons1 file
  PromptCopy

• AppCreator

  app-creator

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

  @hugeicons/react, @hugeicons/core-free-icons1 file
  PromptCopy

• AuthForm

  auth-form

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

  utils, neon-tokens1 file
  PromptCopy

• AutoscaleChart

  autoscale-chart

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

  recharts1 file
  PromptCopy

• BannerPattern

  banner-pattern

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

  utils2 files
  PromptCopy

• BranchDiff

  branch-diff

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

  @hugeicons/react, @hugeicons/core-free-icons, diff2 files
  PromptCopy

• BranchPicker

  branch-picker

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

  @hugeicons/react, @hugeicons/core-free-icons1 file
  PromptCopy

• BranchUsageTable

  branch-usage-table

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

  utils, neon-tokens1 file
  PromptCopy

• Bubble

  Chat bubble primitive with grouping and reactions.

  @base-ui/react, class-variance-authority1 file
  PromptCopy

• ChainOfThought

  chain-of-thought

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

  @base-ui/react, @hugeicons/react, @hugeicons/core-free-icons1 file
  PromptCopy

• CheckpointTimeline

  checkpoint-timeline

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

  utils, neon-tokens1 file
  PromptCopy

• ColorPicker

  color-picker

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

  @base-ui/react, @hugeicons/core-free-icons, @hugeicons/react1 file
  PromptCopy

• ComputeStatus

  compute-status

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

  utils, neon-tokens1 file
  PromptCopy

• ConfirmDialog

  confirm-dialog

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

  utils, neon-tokens1 file
  PromptCopy

• ConsumptionChart

  consumption-chart

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

  recharts2 files
  PromptCopy

• CostEstimateCard

  cost-estimate-card

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

  utils, neon-tokens1 file
  PromptCopy

• CreateProject

  create-project

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

  @hugeicons/react, @hugeicons/core-free-icons1 file
  PromptCopy

• DateRangePicker

  date-range-picker

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

  utils, neon-tokens1 file
  PromptCopy

• DBConnectionCard

  db-connection-card

  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.

  @hugeicons/react, @hugeicons/core-free-icons1 file
  PromptCopy

• DotMatrixWave

  dot-matrix-wave

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

  utils2 files
  PromptCopy

• ElasticSlider

  elastic-slider

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

  motion2 files
  PromptCopy

• EmptyState

  empty-state

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

  utils, neon-tokens1 file
  PromptCopy

• HalftoneBloom

  halftone-bloom

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

  utils2 files
  PromptCopy

• HealthCard

  health-card

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

  @hugeicons/react, @hugeicons/core-free-icons1 file
  PromptCopy

• InlineCitation

  inline-citation

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

  @base-ui/react1 file
  PromptCopy

• LogsViewer

  logs-viewer

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

  @hugeicons/react, @hugeicons/core-free-icons, anser2 files
  PromptCopy

• Marker

  Inline conversation status marker.

  @base-ui/react, class-variance-authority1 file
  PromptCopy

• MeshGradient

  mesh-gradient

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

  utils2 files
  PromptCopy

• Message

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

  utils, neon-tokens1 file
  PromptCopy

• MessageScroller

  message-scroller

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

  @shadcn/react, @hugeicons/core-free-icons, @hugeicons/react1 file
  PromptCopy

• MetricCard

  metric-card

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

  recharts, @hugeicons/core-free-icons, @hugeicons/react1 file
  PromptCopy

• ModelSelect

  model-select

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

  motion, @base-ui/react, @hugeicons/core-free-icons, @hugeicons/react1 file
  PromptCopy

• NeonAurora

  neon-aurora

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

  utils2 files
  PromptCopy

• NeonLoader

  neon-loader

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

  utils, neon-tokens1 file1 example
  PromptCopy

• ProvisioningStatus

  provisioning-status

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

  utils, neon-tokens1 file
  PromptCopy

• QueryHistory

  query-history

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

  @hugeicons/react, @hugeicons/core-free-icons, @codemirror/lang-sql, @lezer/highlight2 files
  PromptCopy

• Reasoning

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

  @base-ui/react, @hugeicons/react, @hugeicons/core-free-icons, streamdown1 file
  PromptCopy

• RegionCard

  region-card

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

  @hugeicons/react, @hugeicons/core-free-icons1 file
  PromptCopy

• RegionGlobe

  region-globe

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

  globe.gl1 file
  PromptCopy

• RegionSelect

  region-select

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

  utils, neon-tokens2 files
  PromptCopy

• SchemaExplorer

  schema-explorer

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

  @hugeicons/react, @hugeicons/core-free-icons1 file
  PromptCopy

• SQLRunner

  sql-runner

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

  @hugeicons/react, @hugeicons/core-free-icons, codemirror, @codemirror/lang-sql2 files
  PromptCopy

• StatusBadge

  status-badge

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

  utils, neon-tokens1 file
  PromptCopy

• StorageBreakdown

  storage-breakdown

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

  utils, neon-tokens2 files
  PromptCopy

• ThinkingModelSelect

  thinking-model-select

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

  utils, neon-tokens1 file
  PromptCopy

• ThinkingSelect

  thinking-select

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

  motion1 file
  PromptCopy

• ToolCallChip

  tool-call-chip

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

  @hugeicons/react, @hugeicons/core-free-icons1 file
  PromptCopy

• UpgradeDialog

  upgrade-dialog

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

  utils, neon-tokens1 file
  PromptCopy

• UsageCard

  usage-card

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

  utils, neon-tokens1 file
  PromptCopy

• UsagePanel

  usage-panel

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

  utils, neon-tokens1 file
  PromptCopy

• WorkspaceTabs

  workspace-tabs

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

  utils, neon-tokens1 file
  PromptCopy