---
title: Patina UI - Install shadcn Components
description: Search the Patina catalog and install components, blocks, and shells via shadcn CLI
---

# Patina UI Workflow

Patina is a premium shadcn companion kit with motion-first components, marketing blocks, and full app shells.

## Catalog

- **Components**: 150+ UI primitives (buttons, inputs, cards, modals, etc.)
- **Blocks**: Assembled marketing sections (heroes, features, pricing, testimonials)
- **Shells**: Complete app templates (dashboard, auth, settings, etc.)

**Pricing**:
- Free: Motion primitives, basic components, 3 starter shells
- Pro ($49): All blocks and shells
- Deluxe ($119): Pro + priority support

## Workflow: Find → Install → Adapt

### 1. Find

Use the Patina MCP tools to search the catalog:

```
search({ query: "button", kind: "component" })
list_catalog({ kind: "block", category: "heroes" })
get_item({ name: "marquee" })
```

### 2. Install

Get the install command from the MCP or construct it:

```bash
npx shadcn@latest add @patina/marquee
npx shadcn@latest add @patina-pro/hero-split
```

**Registry format**:
- `@patina/[name]` for free items
- `@patina-pro/[name]` for pro/deluxe items

### 3. Adapt

Import and use in your Next.js project:

```tsx
import { Marquee } from "@/components/ui/marquee";

export default function Page() {
  return <Marquee>Your content here</Marquee>;
}
```

## Common Tasks

**Find a button component**:
- Use `search({ query: "button", kind: "component" })`
- Install: `npx shadcn@latest add @patina/shimmer-button`

**Get a hero section**:
- Use `search({ query: "hero", kind: "block" })`
- Install: `npx shadcn@latest add @patina-pro/hero-split`

**Browse all shells**:
- Use `list_catalog({ kind: "shell" })`
- Install: `npx shadcn@latest add @patina/shell-saas-marketing` (free)

## Important Notes

1. **Registry setup**: Users must add Patina to their `components.json` first:
   ```json
   {
     "registries": {
       "@patina": "https://patina-ui.nstranquist.workers.dev/r/{name}.json"
     }
   }
   ```

2. **Dependencies**: Some components require `motion` (Framer Motion). The install command handles this automatically.

3. **Pro content**: Pro/Deluxe items can be installed but require a license key for production use.

4. **Categories**: buttons, motion, text, effects, controls, feedback, data, cards, modals, heroes, social, features, convert, chrome, content, forms, wow, templates, inputs

## MCP Integration

- **Server URL**: `https://patina-ui.nstranquist.workers.dev/api/mcp`
- **Authentication**: None required (public catalog)
- **Tools**: `search`, `list_catalog`, `get_item`, `get_install_command`

## Isolated Previews

For agents and CI, individual components can be rendered in isolation at `/isolate/[name]` routes (e.g., `/isolate/button`). These routes are chrome-less, force-dynamic, and render only the component preview. View the full index at `/isolate`.

## Links

- Website: https://patina-ui.nstranquist.workers.dev
- MCP Docs: https://patina-ui.nstranquist.workers.dev/mcp
- Isolate Index: https://patina-ui.nstranquist.workers.dev/isolate
- Installation Guide: https://patina-ui.nstranquist.workers.dev/install
- Pricing: https://patina-ui.nstranquist.workers.dev/pricing