Build faster with
Empire UI.

Quick start

Every component is self-contained. Browse the collection, pick a style, click a component and copy the code into your project. No package to install, no runtime dependency.

export function GlassCard() {
  return (
    <div className="rounded-2xl border border-white/20 bg-white/10
      p-6 backdrop-blur-xl shadow-xl">
      <h3 className="text-lg font-bold text-white">Frosted UI</h3>
      <p className="mt-1 text-sm text-white/70">Copy. Paste. Ship.</p>
    </div>
  )
}

MCP server — Claude Code & Cursor

The Model Context Protocol lets AI editors call Empire UI directly: search components, fetch code, and insert it into your files without leaving the editor.

// ~/.claude/settings.json  (or .claude/settings.json in your project)
{
  "mcpServers": {
    "empire-ui": {
      "command": "npx",
      "args": ["empire-ui-mcp", "--stdio"],
      "env": { "EMPIRE_API_KEY": "your_api_key" }
    }
  }
}

// .cursor/mcp.json
{
  "mcpServers": {
    "empire-ui": {
      "command": "npx",
      "args": ["empire-ui-mcp", "--stdio"],
      "env": { "EMPIRE_API_KEY": "your_api_key" }
    }
  }
}

• search_components — search by name, style or description
• get_component — full source code by slug
• list_styles — the 40 visual styles
• get_random_component — a random published block

Styles & tokens

Empire UI is organised by visual style — glassmorphism, neumorphism, neo-brutalism, Y2K, and 36 more. Each style is driven by a small token set (accent, surface, radius, shadow) so the same component renders natively in any look. Start from the glassmorphism hub.

Free generators

Live-preview tools that write production CSS & Tailwind for you: glassmorphism, gradient and box-shadow. See all in the tools hub.

License & pricing

Everything on Empire UI is free and MIT-licensed — use it in personal and commercial projects. A Pro plan adds Figma export, premium templates and the hosted MCP key. See pricing.