# The UI kit

> Use Railbase's shadcn-style component kit in your own frontend.

_Updated: 2026-06-04_

The same component library that builds the Railbase admin is available to your
frontend. It's a shadcn-style kit — you **copy the source** into your project and
own it, rather than installing an opaque dependency.

> [!TIP]
> Every component has its own reference page in the **UI Components** section —
> e.g. [Button](ui-button), [Select](ui-select), [Data table](ui-QDatatable). This
> page covers the kit as a whole: how to pull components in and wire it up.

## From the CLI

```bash
railbase ui list                 # available components
railbase ui peers                # the `npm install …` line for peer deps
railbase ui init                 # scaffold styles.css, cn.ts, primitives into your project
railbase ui add button input form  # copy specific components (+ their local deps)
```

`ui add` resolves local dependencies automatically — adding `form` pulls in the
`label` it uses. Run `ui init` once before `ui add`.

## From the HTTP registry

The kit is also served over HTTP at `/api/_ui/*`, so a build script can pull
sources directly from a running instance:

```bash
curl http://localhost:8095/api/_ui/styles.css            > src/styles.css
curl http://localhost:8095/api/_ui/cn.ts                 > src/lib/ui/cn.ts
curl http://localhost:8095/api/_ui/components/button/source > src/lib/ui/button.tsx
```

Other endpoints: `/api/_ui/manifest`, `/api/_ui/registry`, `/api/_ui/components`,
`/api/_ui/components/{name}`, `/api/_ui/primitives`, `/api/_ui/peers`.

> [!NOTE]
> "Copy, don't install" means upgrades are explicit: you re-copy a component when
> you want its newer version, and your local edits are never clobbered by a
> package bump. The kit ships its own theme tokens (`styles.css`) and a `cn()`
> helper.

This pairs naturally with the [TypeScript SDK](typescript-sdk): generate a typed
client for your data, drop in the UI kit for the interface, and you have a
full-stack app against your Railbase backend.