Introduction

What Arc is

Arc is a React component and block library designed for AI-assisted frontend development. It has 245 components, 129 blocks and 14 complete app screens, 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

121 components and 22 blocks and screens are free and open source under the MIT license, with no account needed. Arc Pro adds 124 components, 107 blocks and 14 screens: 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.

Items marked Pro are part of Arc Pro. Their previews and docs are open to everyone, and members install the source from the same page after signing in. You can filter the sidebar by Free or Pro, and the pricing page lists what each plan includes.

Install it

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

npx shadcn@latest add https://uiarc.dev/r/arc-foundation.jsonnpx shadcn@latest add https://uiarc.dev/r/button.json

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

claude mcp add --transport http arc https://uiarc.dev/api/mcp

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

How Arc differs from shadcn/ui and Magic UI

Arc 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. Arc uses the same copy-the-source model and the same CLI, so the two sit side by side in one project. Where Arc 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; Arc spends more of its catalog on application interface such as inputs, data, feedback and dashboards. Arc is newer and smaller than either, so check that the items you need exist before you commit.

Next steps