Skip to the page
Tactile UI

Start here

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.

On this page
  1. Install a free piece
  2. Install what your Pass opens
  3. The docs, for your agent

Install a free piece

No account, no setup:

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.

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 and keep it in your environment, never in the repository. In a shell on macOS or Linux:

export TACTILE_TOKEN=tui_pat_…

and in PowerShell on Windows:

$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:

{
  "$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:

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

Install by name:

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:

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

Cursor, in .cursor/mcp.json:

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

VS Code, in .vscode/mcp.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.