# Install with shadcn, and the docs MCP

Every object and block is in a registry that the shadcn CLI reads, and the docs answer agents over MCP. Your agent installs a piece instead of writing one.

## Install a free piece

No account, no setup:

```sh
npx shadcn add https://tactileui.dev/r/odometer.json
```

The piece lands in `tactile/odometer/` (inside `src/` when the project has a `src/` folder, so `src/tactile/odometer/` in a Vite app): its class, its stylesheet and `example.html`, the page that runs it. The list of everything is at [/r/registry.json](/r/registry.json).

The shadcn CLI needs a `components.json` in the project even for this. If yours has none, make it, and the `jsconfig.json`, from the next section first; the `registries` part of it is only for Pass pieces.

## Install what your Pass opens

Make a token on [your account](/account#tokens) and keep it in your environment, never in the repository. In a shell on macOS or Linux:

```sh
export TACTILE_TOKEN=tui_pat_…
```

and in PowerShell on Windows:

```powershell
$env:TACTILE_TOKEN = "tui_pat_…"
```

Then name the registry once in `components.json`, at the root of your project. shadcn will not install anything without one, and a fresh project has none, so this is the whole file to make; the `registries` part is Tactile's, the rest is what shadcn needs and does not use here:

```json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "tailwind": { "css": "src/index.css", "baseColor": "neutral", "cssVariables": true },
  "aliases": { "components": "@/components", "utils": "@/lib/utils" },
  "registries": {
    "@tactile": {
      "url": "https://tactileui.dev/r/{name}.json",
      "headers": { "Authorization": "Bearer ${TACTILE_TOKEN}" }
    }
  }
}
```

shadcn also reads the `@/` alias from `jsconfig.json` (or `tsconfig.json`). A fresh Vite app has neither, and shadcn stops with "Couldn't find tsconfig.json". Add this next to `components.json`:

```json
{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"] } } }
```

Install by name:

```sh
npx shadcn add @tactile/pin-screen
```

A token opens what your account owns now, checked on every request. Stop one on your account page and it stops at once. Installing a piece hands over its code, so on a Pass with the 14-day refund it counts as a download.

Fonts are binary files, which a registry item cannot carry. The install says which ones a piece uses; they come with its download on its page.

## The docs, for your agent

The docs are an MCP server at `https://tactileui.dev/mcp`, read-only: search the docs, read a page, list the pieces. It gives the words a visitor reads, so it needs no token.

Claude Code:

```sh
claude mcp add --transport http tactile-ui https://tactileui.dev/mcp
```

Cursor, in `.cursor/mcp.json`:

```json
{ "mcpServers": { "tactile-ui": { "url": "https://tactileui.dev/mcp" } } }
```

VS Code, in `.vscode/mcp.json`:

```json
{ "servers": { "tactile-ui": { "type": "http", "url": "https://tactileui.dev/mcp" } } }
```

Then ask for a piece by what it should do, and the agent finds it, reads its page and installs it.