Arc UI

[Arc: React components and blocks with motion built in. Free and open source, install with shadcn.]

[License: MIT] [shadcn registry: @uiarc] [CI] [121 components] [22 blocks] [React 19]

Docs  ·  Components  ·  Install  ·  AI and MCP  ·  Pro

Arc is a library of React components and blocks with motion built in. Every item is plain source you own: CSS modules on a small set of design tokens, Motion for animation, keyboard support, and a reduced motion path for every animation. Install anything with the shadcn CLI or copy the files by hand. It works in Next.js and Vite, with or without Tailwind. This repository holds the free, open source part: 121 components and 22 blocks, plus the design and motion tokens they share. Every one of them has a live preview at uiarc.dev.

Showcase

A few favorites, recorded live from uiarc.dev. Items marked ^Pro are part of Arc Pro and are not in this repository; everything else installs from here for free.

Contents

• Showcase
• Install
  • Requirements
  • With the shadcn CLI
  • Copy and paste
• Usage
• Theming
• Components
• Blocks
• AI tools
• Troubleshooting
• How releases work
• Repository layout
• Arc Pro
• Contributing
• License

Install

Requirements

• React 19 with TypeScript. The source compiles under strict, noUncheckedIndexedAccess and verbatimModuleSyntax, and needs lib ES2023 or newer (a few items use findLast)
• Next.js (App Router) or Vite
• motion for animation. Some items also use lucide-react or a Radix UI primitive; the CLI installs whatever an item needs.
• The @/* import alias (Next.js and shadcn set it up by default)

No Tailwind is required. Arc styles are CSS modules that read CSS variables.

With the shadcn CLI

Register the @uiarc namespace once in components.json:

{  "registries": {    "@uiarc": "https://uiarc.dev/r/{name}.json"  }}

Then add items by name. Local dependencies, such as the components inside a block, come along automatically:

npx shadcn@latest add @uiarc/button @uiarc/dialog

Every item also installs from its full URL, without touching components.json:

npx shadcn@latest add https://uiarc.dev/r/button.json

Install the design tokens once per app with npx shadcn@latest add @uiarc/arc-foundation, then import them at the root of your app. Components only pull in the motion presets (arc-motion-tokens) and never reinstall foundation.css, so you can also keep the tokens in your own theme package.

// app/layout.tsx (Next.js) or src/main.tsx (Vite)import "@/components/arc/foundation.css";

npx create-next-app@latest my-appcd my-appnpx shadcn@latest init

npm create vite@latest my-app -- --template react-tscd my-appnpx shadcn@latest init

{  "compilerOptions": {    "baseUrl": ".",    "paths": { "@/*": ["./src/*"] }  }}

import path from "node:path";import react from "@vitejs/plugin-react";import { defineConfig } from "vite";
export default defineConfig({  plugins: [react()],  resolve: { alias: { "@": path.resolve(__dirname, "./src") } },});

Copy and paste

1. Install the shared packages: npm install motion lucide-react.
2. Copy registry/foundation.css, registry/motion-tokens.ts and lib/motion-tokens.ts from this repository into the same paths under your @/ root, and import the CSS once at the root.
3. Copy the item's folder from registry/components/<id>/ or registry/blocks/<id>/, keeping the path. Copied files keep this repository's layout and import each other through @/; the CLI install above rewrites that for you. Its public/r/<id>.json file lists every file and npm package it needs.

Each page on uiarc.dev also has a Manual tab with the exact files.

Usage

The CLI puts every file in an arc/ folder under the components alias in your components.json, for example components/arc/button/button.tsx, or src/components/arc/… in a src/ project or monorepo package. Arc files import each other with relative paths, so any alias setup works; move the arc/ folder as a whole if you want it elsewhere. Use them like any local component:

import { Button } from "@/components/arc/button/button";
export default function Page() {  return <Button>Save changes</Button>;}

The code is yours: edit it, rename it, move it. There is no runtime package to keep in sync.

Theming

Components read semantic tokens, never raw colors. Change a token in foundation.css (components/arc/foundation.css after a CLI install) and every component follows, in both themes.

• Dark mode: set data-theme="dark" on <html>. Dark values are tuned separately, not inverted.
• Accent: set data-accent on <html> to neutral, violet, blue, green, amber, orange, coral or rose.
• Motion: springs and durations live in lib/motion-tokens.ts (components/arc/lib/motion-tokens.ts after a CLI install). Every animation respects prefers-reduced-motion.

More in the theming docs and motion docs.

Components

121 free components, grouped as on the site. Click a name for the live preview and docs.

Actions (20) · Inputs (39) · Disclosure (14) · Feedback (11) · Data (32) · Text (4) · Special (1)

Actions

Buttons

Gestures

Menus

Theme

Inputs

Text fields

Special inputs

Selects

Toggles

Sliders

Pickers

Editors

Disclosure

Navigation

Expand

Overlays

Feedback

Messages

Progress

Data

Avatars

Cards

Charts

Tables

Activity

Media

Text

Text effects

Special

Type

Blocks

22 free blocks: complete sections and screens built from Arc components.

App shell

Auth

Pricing

Media

Heroes

Features

Social proof

Content

Headers and footers

AI tools

Arc is built to be used from AI coding tools.

• MCP server: https://uiarc.dev/api/mcp (Streamable HTTP, no key needed for free items). Search, read docs and fetch source from Claude Code, Cursor, VS Code or Codex.

  bash

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

• llms.txt: https://uiarc.dev/llms.txt for an index, llms-full.txt for everything in one file.

• Markdown docs: every page has a Markdown version at /components/<id>/markdown.

Setup for each client is in the AI and MCP docs.

Troubleshooting

"use client";import Image from "next/image";import Link from "next/link";import { ArcProvider } from "@/components/arc/lib/arc-provider";
export function Providers({ children }: { children: React.ReactNode }) {  return <ArcProvider link={Link} image={Image}>{children}</ArcProvider>;}

How releases work

New free components and blocks ship regularly, a few at a time. Each release updates this repository, the @uiarc registry and the changelog together, so the code here always matches what the CLI installs. Watch or star the repository to hear about new items.

Repository layout

registry/foundation.css      design tokens, light and dark themesregistry/motion-tokens.ts    motion presetslib/motion-tokens.ts         motion presets, shared pathlib/                         small shared helpersregistry/components/<id>/    componentsregistry/blocks/<id>/        blocksregistry.json                shadcn registry indexpublic/r/<id>.json           prebuilt registry items, one per component or block

Arc Pro

Arc Pro adds 233 more components and blocks on top of this library: galleries like the Cover flow above, wallet and finance surfaces, richer charts, and complete product screens. They follow the same rules as everything here: plain source you own, both themes, keyboard support and a reduced motion path.

• Source for every Pro component and block, installed with the same shadcn CLI through a personal token, or through the MCP server
• Every new Pro release, plus fixes and updates to the pieces you already have
• Yearly, or one payment for lifetime access. See pricing

Everything in this repository stays free and MIT licensed.

Contributing

Bug reports, fixes and component ideas are welcome. Read CONTRIBUTING.md first, and please follow the code of conduct. To report a security issue, see SECURITY.md.

License

MIT © 2026 Elia Kuratli