Introduction

What Xzero is

Xzero is a React component and block library designed for AI-assisted frontend development. It has 237 components and 137 blocks, each one plain TSX and CSS modules that you copy into your own project and own from then on.

Around the source sits the tooling an AI coding agent needs: a public shadcn registry, an MCP server, an llms.txt index and a Markdown page for every item. Claude Code, Cursor or Codex can search for the right piece, read when to use it, and install it with the same command you would run yourself.

You install an item with the shadcn CLI, or copy its files by hand, and it lands in your repository as source that you can read and change. Every preview runs the same source you install, so the keyboard behavior, loading states, and motion you try on a page are what you get.

How it is organized

Components

Single jobs, grouped by what they do: actions, inputs, disclosure, feedback, data, and text. Close relatives such as the four theme switches share one page.

Special components

Motion-forward pieces with layered interaction, like the dock, cover flow, and liquid tab bar.

Blocks

Complete flows built from components: sign in, billing, settings, analytics. Families such as Login and Sidebar show their variants on one page.

Everything shares one foundation of color, radius, type, and motion tokens, so items look and move alike wherever you drop them.

Reading a page

Each component and block page follows the same order, so you can jump straight to what you need:

• Preview and Code: try it, then read the exact source.
• Installation: one CLI command, or manual steps with every file.
• Usage and API reference: a copyable example and every prop with its type and default.
• Keyboard, accessibility, and motion: what it does for people using a keyboard, a screen reader, or reduced motion.
• Notes for AI: when to pick it and a Markdown version for your assistant. Use Copy page to paste the whole page into a chat.

Press / or ⌘ K anywhere in the library to search.

Free and Pro

120 components and 22 blocks are free and open source under the MIT license, with no account needed. Xzero Pro adds 117 components and 115 blocks: the motion-heavy showpieces and most of the complete product blocks. Pro costs $149 per year or $249 once for lifetime access, and a team plan covers up to 10 people for $799 once or $449 per year.

The complete Free and licensed Pro snapshot is available locally. Filter the library by Free or Pro and install from the local registry. No account, token, billing connection, or sign-in is used.

Install it

With the shadcn CLI, add the foundation once and then any free item by its registry URL:

npx shadcn@latest add https://mcp.xzero.co.uk/r/xzero-foundation.jsonnpx shadcn@latest add https://mcp.xzero.co.uk/r/button.json

To let an AI tool do it, connect the MCP server at https://ui.xzero.co.uk/api/mcp. In Claude Code that is one command, and other clients take the same URL:

claude mcp add --transport http arc https://mcp.xzero.co.uk/mcp

The installation guide covers Next.js and Vite setup, and AI and MCP covers clients, skills and Pro access.

How Xzero differs from shadcn/ui and Magic UI

Xzero is not a replacement for shadcn/ui. shadcn/ui is the broader, more established base: Radix primitives styled with Tailwind, with a large community and many extensions. Xzero uses the same copy-the-source model and the same CLI, so the two sit side by side in one project. Where Xzero differs is that it ships finished components with motion and keyboard behavior already worked out, whole blocks built from them, CSS modules instead of Tailwind classes, and an MCP server and Markdown docs aimed at AI tools. Magic UI is closest in spirit and focuses on animated effects for marketing pages; Xzero spends more of its catalog on application interface such as inputs, data, feedback and dashboards. Xzero is newer and smaller than either, so check that the items you need exist before you commit.

Next steps