# Get started — Detent

> Install your first Detent component with the shadcn CLI, set up reduced motion, and connect Pro. Or hand it all to your coding agent.

Canonical: https://detentui.com/docs
Last updated: 2026-11-10

Detent installs with the shadcn CLI, so every piece lands in your project as source you own. 18 components are free under MIT; the rest come with Pro.

## With your coding agent

Paste this into Cursor, Claude Code or any agent. It reads the library and installs for you.

```text
Read https://detentui.com/llms.txt to learn the Detent component library. Then install the Popup component into this project with the shadcn CLI, using the exact command listed there, and use it on the home page. If the project has no components.json yet, run shadcn init first.
```

## Install a component

### 1. Set up shadcn

Skip this if your project already has a components.json. You need React and Tailwind CSS v4; Next.js is what we test on.

```bash
npx shadcn@latest init
```

### 2. Add Popup

Its source lands in components/detent, ready to change. The first install also brings the Detent theme, and anything a piece needs, like motion, comes with it.

```bash
npx shadcn add https://detentui.com/r/popup
```

### 3. Respect reduced motion

Wrap your app once in `<MotionConfig reducedMotion="user">` from motion/react, in app/layout.tsx. Everything Detent animates then calms down for people who have asked their device for less motion.

## Install Pro

Pro installs the same way, from a private registry that knows your key. Pro is $99, once, with every update for life: https://detentui.com/pro

### 1. Make a key

After you buy, make one on your account page (https://detentui.com/account). One per machine, and one for CI.

### 2. Add the registry to components.json

```json
{
  "registries": {
    "@detent-pro": {
      "url": "https://detentui.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${DETENT_PRO_KEY}" }
    }
  }
}
```

### 3. Add your key to .env.local

```bash
DETENT_PRO_KEY=dtnt_your-key
```

### 4. Install anything

```bash
npx shadcn add @detent-pro/glyph
```

## If something goes wrong

- pnpm stops with ERR_PNPM_IGNORED_BUILDS — pnpm is holding back Next.js build scripts in a new project. Run pnpm approve-builds, then install again.
- A Pro install answers 401 or 403 — Check DETENT_PRO_KEY is in .env.local, the registry block is in components.json, and the key is still listed on your account page.
- Colours or type look unstyled — The theme stylesheet is not loaded. The first install imports it into your global CSS; if you moved that file, import it again.
- A coding agent installs the wrong thing — Point it at https://detentui.com/llms.txt first. It lists every component with its exact install command.

Still stuck? Write to hello@detentui.com.

## Related
- [Components](https://detentui.com/components)
- [Blocks](https://detentui.com/blocks)
- [Design system](https://detentui.com/system)
- [Pro](https://detentui.com/pro)