Installation

Add Neon UI components to your project with the shadcn CLI.

Neon UI is a shadcn registry. You don’t install a package; you pull component source directly into your project.

Add a component

npx shadcn@latest add https://ui.neon.com/r/branch-picker.json

The component, its dependencies, and a typed example land in your components directory. From there it’s your code: restyle it, rip parts out, wire it to your own state.

Every component pulls in components/tokens.css — the Neon palette, radius, and animation keyframes. Import it once in your global stylesheet:

@import "../components/tokens.css";

Prerequisites

• React 19 and Tailwind v4
• A shadcn-initialized project (npx shadcn@latest init)
• tw-animate-css imported in your global stylesheet (@import "tw-animate-css";) — entrance cascades, verdict rolls, and overlay fades ride its animate-in / animate-out utilities and stay politely static without it
• For components that talk to Neon, the relevant SDK, installed automatically as a dependency. Which one depends on what the component reads:
  • @neon/sdk for the control plane: projects, branches, endpoints, snapshots, API keys, consumption. This is the official TypeScript SDK for the Neon API, and it is the one nearly every data-backed component uses.
  • @neondatabase/serverless for running SQL against a branch, which is what SQLRunner and SchemaExplorer do. It is a Postgres driver, not an API client, so it is only pulled in by components that execute queries.

How components are built

Every component splits into two layers:

• A presentational component that takes data as props. No fetching, no environment variables.
• An optional data hook (useBranches, useComputeState) that wraps the real Neon surface.

That split means a component works with fixtures, React Query, server components, or whatever your app already uses. Docs previews render the presentational layer with fixture data, so what you see here is exactly what ships.