Arc UI

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.

Cover flow Pro

A depth rail of photos you can throw, with soft grounded shadows and a quiet reflection.

Donut chart

Arcs morph between datasets while the total rolls into the center.

Billing toggle

Monthly and yearly prices roll into each other, savings included.

Orbit logos Pro

Integrations orbit your product mark. Filter them by category.

Wallet stack Pro

Fan a stack of cards and lift one out to see its activity.

Line chart

Switch the range and the line redraws against the previous period.

Number field

Bounded steppers that say so when you reach the limit.

Activity rings Pro

Daily goals sweep, count up and trace a second lap past 100%.

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](https://www.npmjs.com/package/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";

Setting up a new project

Next.js

npx create-next-app@latest my-app

cd my-app npx shadcn@latest init

Accept the default @/* import alias.

Vite

npm create vite@latest my-app -- --template react-ts

cd my-app npx shadcn@latest init

Map @/* to src in tsconfig.json and vite.config.ts, as shadcn expects:

{

"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/ / or registry/blocks/ /, 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/ .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 Save changes ; }

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 . Dark values are tuned separately, not inverted.
• Accent: set data-accent on to neutral, `vio