Introduction

Zyeon UI is a React + Tailwind component registry, fully compatible with the shadcn CLI. Every component ships as a four-piece bundle:

1. Preview — a live, interactive demo on every page.
2. Source — the full component source, yours to copy and own.
3. Prompt — the generation prompt behind the component. Paste it into your AI assistant to recreate the component from scratch, or tweak it to generate your own variant.
4. Concept map — a diagram of the frontend concepts the component is built on, so you understand why it works, not just that it works.

Install a component

Every component page has an install command. The direct URL form works with zero setup:

npx shadcn@latest add https://ui.zyeon.ai/r/effect-button.json

To use the shorter @zyeon namespace, add the registry to your components.json once:

{
  "registries": {
    "@zyeon": "https://ui.zyeon.ai/r/{name}.json"
  }
}

Then install with:

npx shadcn@latest add @zyeon/effect-button

Use with AI agents (MCP)

Zyeon UI is a standard shadcn registry, so the official shadcn MCP server works with it out of the box — agents can search, read and install these components directly:

npx shadcn@latest mcp init

Requirements

Components target React 19, Tailwind CSS v4 and the shadcn conventions (cn util, semantic color tokens, radix-ui primitives where applicable). Each page lists its extra npm dependencies, which the CLI installs for you.