PaceUI

  • Components
  • Blocks
  • Templates
  • Studio
  • Resources
Intro
  • Components
  • Installation
  • MCP
Agents
  • Chat Composer
  • Workflow Board
  • Thinking States
  • Audio Visualizer
  • Task Pipeline
  • Approval Card
  • Model Ability Selector
  • Model Selector
  • Response Writer
  • AI Suggestions
  • Token Counter
Crafts
  • All Crafts
  • Avatar Flight
  • Voice Record
  • Starfield Card
  • Destination Queue
  • Rolling Bento
  • Download Button
  • Cart Stepper
  • Heart Burst
  • Copy Bar
  • Generative Grid
  • Destination Card
  • Magnetic Button
  • Morphing Copy
  • Expanding Search
  • Metric Tracker
  • Tilt Card
  • Animated Stack
Charts
  • API Traffic
  • Weekly Traffic
  • Financial Performance
  • Channel Sales
  • Customer Growth
  • Customer Segments
  • Sales Overview
  • Traffic Distribution
  • Daily Orders
  • Acquisition Funnel
  • Weekly Attendance
  • Market Trends
  • Portfolio Overview
  • Instance Health
  • Resource Usage
  • SaaS Subscriptions
  • Database Performance
  • Model Usage
  • Spend Allocation
Motion
  • Accordion
  • Alert
  • Calendar
  • Checkbox
  • Collapsible
  • Combobox
  • Context Menu
  • Dropdown Menu
  • Empty
  • Hover Card
  • Input OTP
  • Menubar
  • Navigation Menu
  • Pagination
  • Progress
  • Radio Group
  • Scroll Area
  • Select
  • Sidebar
  • Slider
  • Switch
  • Tabs
  • Tooltip
  • Reveal Text
  • Scramble Text
  • Squash Text
  • Bouncing Text
  • Mouse Wave Text
  • Text Fall Button
  • Spring Button
  • Infinite Scroller
  • Fillable Button
  • Layered Stack
  • Gradient Shadow
  • Profile Peek
  • Flip Reveal
  • Reveal on Scroll
  • Swap
  1. Components
PreviousNext

MCP

Connect PaceUI MCP to your IDE to search and install free blocks directly into your codebase. Pro features like UI generation are authenticated via your API key.

Get your API key (Pro only)

Free tools (find-block, find-block-by-tags, add-block) work without an API key. If you want to use Pro features like UI generation (create-ui) or design migration (migrate-design):

  1. Log in with the account you used to buy Pro.
  2. Head over to /account/api-keys.
  3. Create a new key and grab your token (PACEUI_API_KEY).

Quick AI setup (optional)

You can skip manual configuration entirely — paste this setup prompt into your editor's AI chat (Cursor, Windsurf, Claude Code, or Antigravity):

Prompt
https://paceui.com/mcp.md

Your AI assistant will read the instructions, verify your active IDE, and configure the PaceUI MCP server for you automatically.

Configure your IDE

Select your editor below to view its MCP configuration. Add the server under the name PaceUI with URL https://paceui.com/api/mcp:

Cursor
VS Code
Google Antigravity
Claude Desktop
Claude Code
Windsurf
Zed
Cline
{
  "mcpServers": {
    "PaceUI": {
      "type": "sse",
      "url": "https://paceui.com/api/mcp",
      "headers": {
        "Authorization": "Bearer ${PACEUI_API_KEY}"
      }
    }
  }
}

Use MCP in your workflow

Once connected, prompt your AI assistant directly in your project. The assistant will invoke the registered PaceUI tools:

Prompts
# Search free blocks
Search PaceUI for an analytics chart or pricing table block

# Install a block into your project
Add the PaceUI chat-composer block to my codebase

# Generate tailored UI (Pro)
Generate a user profile card using PaceUI tokens and motion

Available Tools

ToolAccessDescription
find-blockFreeSearch PaceUI blocks by keyword, component name, or category
find-block-by-tagsFreeDiscover blocks filtered by design tags and layout requirements
add-blockFreeAdd block code and dependencies directly into your repository
create-uiProGenerate production-ready UI components matching project tokens
migrate-designProMigrate existing components to PaceUI standards and design tokens
migrate-design-directorProPlan and coordinate multi-component design migrations

Troubleshooting

"Tool requires an active license"

This means you called a premium tool (create-ui, migrate-design) without an active license. Make sure:

  1. You have an active Pro plan — verify on your account page
  2. Your API key is passed in the Authorization header (Bearer <YOUR_API_KEY>)
  3. The key is valid — regenerate it from Account → API Keys if needed

"Connection failed or SSE error"

If your editor cannot reach the server:

  1. Confirm the endpoint URL is https://paceui.com/api/mcp
  2. Verify that your editor supports SSE (Server-Sent Events) or HTTP transports
  3. Reload your IDE window or restart the MCP server panel

"Zed IDE configuration"

Zed uses context_servers instead of mcpServers, and nests the endpoint in a settings block:

settings.json
{
  "context_servers": {
    "PaceUI": {
      "settings": {
        "url": "https://paceui.com/api/mcp",
        "headers": {
          "Authorization": "Bearer ${PACEUI_API_KEY}"
        }
      }
    }
  }
}

Components

Installation

MCP

Installation

PaceUI

Animated blocks, components, and templates for Next.js and TanStack Start. Built with Motion and shadcn - clean code you own.

GitHubTwitterDiscord

Products

BlocksComponentsTemplatesCraftsTanStack ChartsMCP ServerStarter KitsStyleX Components

Resources

DocumentationMotion ComponentsGSAP AnimationsNative AIBlogChangelog

Pricing & Account

PricingManage AccountLicensesAPI KeysAffiliate Program

Company

Contact UsDiscord CommunityPrivacy PolicyTerms of Service

© 2026 PaceUI. All rights reserved. Built by indie developer, Denish

PACEUI