Installation

Requirements

A React 19 project with TypeScript and the @/* path alias. Arc components use CSS modules and CSS variables, so they work without Tailwind. The steps below use the shadcn CLI; the manual path at the end needs nothing extra.

Next.js

1. Create a project

   pnpmnpmyarnbun

   CopyCopiedFailed

   $pnpm create next-app@latest my-apppnpm create next-app@latest my-app

   Skip this for an existing app. Accept the default @/* import alias.

2. Initialize shadcn

   pnpmnpmyarnbun

   CopyCopiedFailed

   $pnpm dlx shadcn@latest initpnpm dlx shadcn@latest init

   This creates components.json, which the CLI reads to know where files go.

3. Use next/link and next/image (optional)

   Components such as Avatar, Breadcrumb and Lightbox gallery render a plain <a> and <img>, so they work in any React app. Wrap your app once to route them through Next.js, or through your own Link (for example a locale-aware one). arc-provider installs with the components that use it.

   app/arc-provider.tsx

   CopyCopiedFailed

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

Vite

1. Create a project

   pnpmnpmyarnbun

   CopyCopiedFailed

   $pnpm create vite my-app --template react-tspnpm create vite my-app --template react-ts

2. Add the path alias

   Map @/* to src in both TypeScript and Vite, as shadcn expects.

   tsconfig.json

   CopyCopiedFailed

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

   vite.config.ts

   CopyCopiedFailed

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

3. Initialize shadcn

   pnpmnpmyarnbun

   CopyCopiedFailed

   $pnpm dlx shadcn@latest initpnpm dlx shadcn@latest init

Add the @uiarc registry

Register the namespace once in components.json. After that you install Arc items by name.

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

Prefer not to edit the config? Every item also installs from its full URL, for example https://uiarc.dev/r/button.json.

Add the foundation

Every Arc item reads the shared tokens, so install them once per app. Items never reinstall this file, so you can also keep the tokens in your own theme package.

Then import the tokens once, at the root of your app.

import "@/components/arc/foundation.css";

Install components

Add one or several items at once. Local dependencies, such as a block's components, come along automatically.

Files land 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. They 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>;}

Manual installation

1. Install the packages

   Most items use Motion and Lucide; each page lists its exact dependencies.

   pnpmnpmyarnbun

   CopyCopiedFailed

   $pnpm add motion lucide-reactpnpm add motion lucide-react

2. Copy the foundation

   Copy registry/foundation.css and lib/motion-tokens.ts from any item's Manual tab, and import the CSS once at the root.

3. Copy the item

   Open the component page, switch Installation to Manual, and copy each file into the same path under your @/ root. Manual files keep Arc's repository layout (registry/, lib/) and import each other through @/; the CLI install above rewrites that for you.

Pro components

Pro items install the same way once you are signed in with a Pro plan: the install command and source appear on their page. See what is in Pro.