21st Dev

---
name: 21st-dev
description: Use when UI component registry for AI coding agents — search, generate, and publish React/Next.js/Tailwind components via MCP. 12,000+ community components, logo search, design system tokens, theme generation. Use when building UI with agent, need production components, want to publish/share components.
domain: integrations
author: oyi77
license: MIT
subdomain: ui-registry
tags:
- ui
- components
- registry
- mcp
- react
- nextjs
- tailwind
- agent
- generate
- publish
version: 1.0.0
category: integrations
---

# 21st.dev — UI Component Registry for AI Agents

21st.dev is a UI component registry designed for AI coding agents. It provides MCP tools to search 12,000+ community components, generate new UI with variants, search logos, and publish/share components.

Source: [21st.dev](https://21st.dev) | MCP: [docs.21st.dev/mcp](https://docs.21st.dev/mcp)

## When to Use

- Building UI with an AI agent and need production-ready components
- Searching for React/Next.js/Tailwind components by category
- Generating new UI components with variants
- Searching for logos by industry/style
- Publishing your own components to a team library
- Need design system tokens or theme generation

## MCP Setup

21st.dev exposes an HTTP MCP server. Get an API key at [21st.dev/mcp](https://21st.dev/mcp).

```json
{
  "mcpServers": {
    "21st": {
      "url": "https://21st.dev/api/mcp",
      "headers": { "x-api-key": "YOUR_21ST_API_KEY" }
    }
  }
}
```

Or install via CLI:
```bash
npx @21st-dev/cli@latest init --client claude  # or: cursor | vscode | windsurf | codex
```

## Core MCP Tools

| Tool | Purpose | Example |
|------|---------|---------|
| `search` | Search components/themes/templates | "hero section SaaS" |
| `generate` | Generate new UI with variants | "pricing table 3 tiers" |
| `get_inspiration` | Get inspiration from existing components | "dashboard sidebar" |
| `search_logo` | Search logos by query | "tech startup minimal" |
| `get_component` | Retrieve a specific component by ID | — |
| `publish` | Publish a component to the registry | — |
| `bookmark` | Bookmark components for later | — |

## Workflow

### 1. Search for Existing Components

```
User: "Find a hero section for a SaaS landing page"
→ search("hero section SaaS landing") → returns matching components
→ Select best fit → retrieve code → adapt to project
```

### 2. Generate New UI

```
User: "Create a pricing table with 3 tiers"
→ generate("pricing table 3 tiers monthly annual toggle")
→ Returns component code + variants
→ Select variant → integrate
```

### 3. Logo Search

```
User: "Find a minimal tech logo"
→ search_logo("minimal tech startup")
→ Returns logo options → select → download
```

### 4. Publish Component

```
User: "Publish this button component to 21st"
→ publish(component_code, metadata)
→ Component available in registry
```

## Component Categories

- **Hero** — Landing page heroes, headers, CTAs
- **Pricing** — Pricing tables, toggle, comparison
- **Navigation** — Navbars, sidebars, breadcrumbs
- **Forms** — Login, signup, contact, multi-step
- **Cards** — Product, feature, testimonial, blog
- **Tables** — Data tables, dashboards, pricing
- **Footers** — Simple, multi-column, newsletter
- **Testimonials** — Quotes, ratings, carousels
- **CTAs** — Call-to-action sections
- **Features** — Feature grids, icon lists
- **Stats** — Metrics, counters, KPIs
- **FAQ** — Accordions, toggles
- **Blog** — Post cards, lists, grids
- **Gallery** — Image grids, lightboxes
- **Modals** — Dialogs, drawers, popovers
- **Authentication** — Login, register, forgot password
- **Empty States** — No data, 404, loading
- **Onboarding** — Tours, tooltips, walkthroughs

## Supported Stacks

- React / Next.js
- Tailwind CSS
- shadcn/ui
- HTML/CSS
- Vue (limited)
- Astro (limited)

## Integration with Other Skills

- **ui-ux-pro-max** — Use 21st.dev to find components that match the design system generated by ui-ux-pro-max
- **shadcn/ui** — Many 21st components are built on shadcn/ui primitives
- **tailwind-advanced** — Components use Tailwind classes; customize with tailwind-advanced patterns
- **frontend-design** — Use 21st components as starting points for custom designs

## When NOT to Use

- Need a full page layout (use ui-ux-pro-max design system generation)
- Need complex animations (use motion.dev)
- Need brand identity (use brand skill)
- Need backend/API components (not a 21st.dev use case)
- Project doesn't use React/Tailwind (limited support for other stacks)

## Red Flags

- **Copy-pasting without adaptation**: Always customize components to match your design system
- **Ignoring accessibility**: Verify components meet WCAG standards before shipping
- **Over-reliance on registry**: Custom designs often outperform generic components
- **Not checking license**: Verify component license before commercial use

## Verification

- [ ] Component matches design system tokens
- [ ] Accessibility verified (contrast, keyboard nav, ARIA)
- [ ] Responsive at all breakpoints
- [ ] License checked for commercial use
- [ ] Customized to match brand identity

## Process

1. Analyze UI requirements
2. Search 21st.dev for matching components
3. Select best-fit component(s)
4. Generate variants if needed
5. Customize to match design system
6. Verify accessibility and responsiveness
7. Integrate into project

## Anti-Rationalization Table

| Rationalization | Reality |
|---|---|
| "Registry components are production-ready" | Always audit for accessibility, performance, and design consistency |
| "I'll customize later" | Uncustomized generic components look generic — customize from the start |
| "All components are free" | Check licenses; some require attribution or have usage limits |
| "One component is enough" | Combine multiple components for complex UIs; don't force-fit |