Arc

WHAT IS IT?

Arc is an MIT-licensed set of 97 React components and 22 blocks. Nothing goes into your dependencies: the shadcn CLI, or a plain copy-paste, drops TSX files and CSS modules into your repository, and from then on they are local components you edit like any other. Animation runs on the Motion library, and every animation falls back to a simple fade when the OS asks for reduced motion.

The catalog is aimed at product interfaces: dashboards, sign-in screens, pricing pages, marketing pages. It requires React 19 with TypeScript, Next.js (App Router) or Vite, and an @/* import alias mapped to the project root, since the files import each other through it.

WHY IS IT INTERESTING?

• No package to keep in sync: there is no Arc npm package. Each item has a public/r/<id>.json file listing its source files and npm dependencies (motion, sometimes lucide-react or a Radix primitive), and the CLI pulls in all of it.
• Tailwind is optional: styles are CSS modules that only read semantic tokens (--surface, --accent, --danger...) from registry/foundation.css. Change a token and the whole library follows, in light and dark. A data-accent attribute picks one of eight accent colors.
• Dark theme tuned on its own: dark values are set separately rather than inverted. Switching uses data-theme="dark" on <html>, not a dark class, so a project that toggles themes by class has to change how it does it.
• Twelve animated charts: line, bar, donut, streamgraph, brush, waffle, slope, sparkline, gauge, activity heatmap, ridgeline and treemap. They sit in a 28-item Data category that also has a sortable table and a tree view.
• Previews match the code: the docs state that every preview on uiarc.dev runs the exact source you install, including keyboard behavior, loading states and motion.
• Public MCP server: https://uiarc.dev/api/mcp speaks Streamable HTTP and needs no key for free items. Claude Code, Cursor, VS Code or Codex can search components, read their docs and fetch their source through it. Every docs page also has a Markdown version.
• Vite trails Next.js slightly: five items (avatar, breadcrumb, changelog-feed, site-header, newsletter-signup) import next/image or next/link. On Vite you swap them for <img> and <a> by hand.

The repository is the free half of an open core model. Arc Pro adds 100 paid components and blocks, sold as a yearly plan or a one-time payment. Their previews and docs are public, their source is not in the repository, and several pieces in the README showcase belong to Pro. The project is also very young: the repository opened on September 24, 2026 and v1.0.0, its only release so far, shipped on September 29. New items land in batches through "Sync from source" commits, and each release updates the repository, the @uiarc registry and the changelog together.

USE CASES

• Build a SaaS dashboard from the metric cards, charts, usage meter and notification center.
• Put together a landing page from the hero, plan comparison, logo marquee, FAQ and footer blocks.
• Handle demanding forms: phone input, date range picker, rich text editor, signature pad, file dropzone.
• Let a coding assistant find and install components through the MCP server.