kuratlielia/arc-library

Docs  ·  Components  ·  Install  ·  AI and MCP  ·  Pro

Arc is a library of React components and blocks with calm, physical motion. 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: 110 components and 22 blocks, plus the design and motion tokens they share. Every one of them has a live preview at uiarc.dev.

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%.

• 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

• 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.

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-app
cd my-app
npx shadcn@latest init

npm create vite@latest my-app -- --template react-ts
cd my-app
npx 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") } },
});

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.

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.

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.

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

Actions (18) · Inputs (34) · Disclosure (13) · Feedback (10) · Data (30) · Text (4) · Special (1)

Buttons

Gestures

Menus

Theme

Text fields

Special inputs

Selects

Toggles

Sliders

Pickers

Editors

Navigation

Expand

Overlays

Messages

Progress

Avatars

Cards

Charts

Tables

Activity

Media

Text effects

Type

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

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.

  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.

"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>;
}

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.

registry/foundation.css      design tokens, light and dark themes
registry/motion-tokens.ts    motion presets
lib/motion-tokens.ts         motion presets, shared path
lib/                         small shared helpers
registry/components/<id>/    components
registry/blocks/<id>/        blocks
registry.json                shadcn registry index
public/r/<id>.json           prebuilt registry items, one per component or block

Arc Pro adds 118 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.

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.

MIT © 2026 Elia Kuratli