arc

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: 100 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
• 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 pointing at your project root

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

Your first install adds arc-foundation (design and motion tokens). Import it once at the root of your app:

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

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 the project root in tsconfig.json and vite.config.ts:

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

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

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 in your project, 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. 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

Files land under registry/ and lib/ at your project root and import each other through @/. Use them like any local component:

import { Button } from "@/registry/components/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 registry/foundation.css and every component follows, in both themes.

Token	Used for
--background	The page behind everything
--surface, --surface-raised, --surface-muted	Cards and inputs, floating layers, quiet fills
--foreground, --text-secondary, --text-muted	Primary, supporting and hint text
--border, --border-subtle, --border-strong	Separators and edges
--accent, --accent-strong, --accent-subtle	Selection, progress and helpful context
--success, --warning, --danger	Status, always paired with a label
--radius-control, --radius-panel, --radius-surface	Controls, menus, cards
--font-display, --font-body	Geist for headings, Inter for everything else

• 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. Every animation respects prefers-reduced-motion.

More in the theming docs and motion docs.

Components

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

Actions (14) · Inputs (31) · Disclosure (13) · Feedback (8) · Data (29) · Text (4) · Special (1)

Actions

Buttons

Component	Description	Install
Button	A clear, responsive action with quiet secondary states.	npx shadcn@latest add @uiarc/button
Action button	A compact button for frequent toolbar actions.	npx shadcn@latest add @uiarc/action-button
Split button	A primary action with a menu of nearby alternatives.	npx shadcn@latest add @uiarc/split-button
Copy button	Copy a value with immediate confirmation.	npx shadcn@latest add @uiarc/copy-button
Confirm morph	A destructive button that morphs into an inline confirmation, a spinner, and a result with undo.	npx shadcn@latest add @uiarc/confirm-morph

Gestures

Component	Description	Install
Hold to confirm	Confirm a destructive action by holding, not tapping.	npx shadcn@latest add @uiarc/hold-to-confirm
Swipe actions	Reveal row actions with a swipe, or from the same actions in a menu.	npx shadcn@latest add @uiarc/swipe-actions

Menus

Component	Description	Install
Dropdown menu	A focused list of actions anchored to a trigger.	npx shadcn@latest add @uiarc/dropdown-menu
Context menu	Secondary actions kept close to the selected object.	npx shadcn@latest add @uiarc/context-menu
User menu	Your account, settings, theme, and sign out behind the avatar. Opens as a bottom sheet on phones.	npx shadcn@latest add @uiarc/user-menu

Theme

Component	Description	Install
Theme switcher	Four smooth ways to move between light and dark appearance.	npx shadcn@latest add @uiarc/theme-switch
Eclipse	The next appearance crosses the page like an eclipse.	npx shadcn@latest add @uiarc/theme-switch-eclipse
Split	The next appearance opens from a slim center seam.	npx shadcn@latest add @uiarc/theme-switch-split
Rise	The next appearance rises into place.	npx shadcn@latest add @uiarc/theme-switch-rise

Inputs

Text fields

Component	Description	Install
Input	A single line field with clear labels and useful states.	npx shadcn@latest add @uiarc/input
Textarea	A multiline field for notes, descriptions, and longer text.	npx shadcn@latest add @uiarc/textarea
Password field	Capture sensitive text with a visible reveal control.	npx shadcn@latest add @uiarc/password-field
Password strength	Show how strong a new password is while it is typed.	npx shadcn@latest add @uiarc/password-strength
Search field	A recognizable search entry point with clear affordances.	npx shadcn@latest add @uiarc/search-field
Expanding search	An icon that morphs into a search field with results beneath it.	npx shadcn@latest add @uiarc/expanding-search
Inline edit	Rename in place: the text becomes a field without moving.	npx shadcn@latest add @uiarc/inline-edit

Special inputs

Component	Description	Install
Number field	Enter a bounded number with clear increment controls.	npx shadcn@latest add @uiarc/number-field
Phone input	A phone field with a country picker, formatting as you type, and E.164 output.	npx shadcn@latest add @uiarc/phone-input
Tag input	Turn short text values into removable tags.	npx shadcn@latest add @uiarc/tag-input
Mention input	A textarea with @people and #channel mentions that act as single tokens, with suggestions at the caret.	npx shadcn@latest add @uiarc/mention-input
Shortcut recorder	Record key combinations into key caps, with conflict warnings, Kbd, and a searchable cheatsheet.	npx shadcn@latest add @uiarc/shortcut-recorder

Selects

Component	Description	Install
Select	A compact choice field with a keyboard friendly menu.	npx shadcn@latest add @uiarc/select
Combobox	Search and select from a list without leaving the field.	npx shadcn@latest add @uiarc/combobox
Multi-select	Select several values while keeping the field readable.	npx shadcn@latest add @uiarc/multi-select
Chip group	Filter by a few facets with chips that morph as you pick them.	npx shadcn@latest add @uiarc/chip-group

Toggles

Component	Description	Install
Radio cards	Selectable option cards with a sliding selection ring, price and description slots, and radio keyboard behavior.	npx shadcn@latest add @uiarc/radio-cards
Billing toggle	A monthly and yearly switch with a savings badge and prices that roll to the new amount.	npx shadcn@latest add @uiarc/billing-toggle
Checkbox	A binary choice with a precise, legible state.	npx shadcn@latest add @uiarc/checkbox
Radio group	Choose one option from a visible set.	npx shadcn@latest add @uiarc/radio-group
Switch	A tactile toggle for settings that take effect immediately.	npx shadcn@latest add @uiarc/switch
Segmented control	Switch between a small set of related views.	npx shadcn@latest add @uiarc/segmented-control

Sliders

Component	Description	Install
Slider	Pick a value or a range on a track that follows your finger.	npx shadcn@latest add @uiarc/slider

Pickers

Component	Description	Install
Calendar	Browse dates in a clear, compact month view.	npx shadcn@latest add @uiarc/calendar
Date picker	Choose a date without losing context.	npx shadcn@latest add @uiarc/date-picker
Date range picker	A range picker that grows from its trigger into two months with presets and a stretching range highlight.	npx shadcn@latest add @uiarc/date-range-picker
Time picker	Choose a time with sensible keyboard behavior.	npx shadcn@latest add @uiarc/time-picker
Color picker	A swatch that grows into a picker with format morphing, eyedropper, saved swatches, and contrast readout.	npx shadcn@latest add @uiarc/color-picker

Editors

Component	Description	Install
Rich text editor	A lightweight editor with markdown shortcuts, a floating toolbar, a slash menu, and HTML and markdown output.	npx shadcn@latest add @uiarc/rich-text-editor
Signature pad	Smooth ink that thins with speed, with undo, replay, and PNG or SVG export.	npx shadcn@latest add @uiarc/signature-pad
File dropzone	A generous target for dropping one or more files.	npx shadcn@latest add @uiarc/file-dropzone

Disclosure

Navigation

Component	Description	Install
Tabs	Switch between related content in the same context.	npx shadcn@latest add @uiarc/tabs
Breadcrumb	Show where a page sits in a hierarchy.	npx shadcn@latest add @uiarc/breadcrumb
Pagination	Move through a long collection with clear bounds.	npx shadcn@latest add @uiarc/pagination

Expand

Component	Description	Install
Scroll area	A native scroll container with thin overlay scrollbars and edge fades that appear only when content overflows.	npx shadcn@latest add @uiarc/scroll-area
Accordion	Progressively reveal supporting information in place.	npx shadcn@latest add @uiarc/accordion
Expandable card	Give a dense card more room when requested.	npx shadcn@latest add @uiarc/expandable-card
Resizable panels	Trade space between panes by dragging the divider between them.	npx shadcn@latest add @uiarc/resizable-panels

Overlays

Component	Description	Install
Dialog	A focused surface for decisions that need attention.	npx shadcn@latest add @uiarc/dialog
Drawer	A temporary side surface for focused work.	npx shadcn@latest add @uiarc/drawer
Bottom sheet	A sheet that rests at a peek or full height and follows your finger.	npx shadcn@latest add @uiarc/bottom-sheet
Popover	A small anchored surface for contextual information.	npx shadcn@latest add @uiarc/popover
Hover card	Preview a person or link on hover or focus without leaving the page.	npx shadcn@latest add @uiarc/hover-card
Tooltip	Short supporting text for unfamiliar controls.	npx shadcn@latest add @uiarc/tooltip

Feedback

Messages

Component	Description	Install
Alert	A persistent message that helps people recover or continue.	npx shadcn@latest add @uiarc/alert
Toast	Brief confirmation for a completed background action.	npx shadcn@latest add @uiarc/toast
Toast stack	Stack short results at the edge until you reach for them.	npx shadcn@latest add @uiarc/toast-stack
Announcement bar	A top banner that rotates messages, counts down, and collapses smoothly when dismissed.	npx shadcn@latest add @uiarc/announcement-bar

Progress

Component	Description	Install
Progress	Show how much of a known task is complete.	npx shadcn@latest add @uiarc/progress
Skeleton	Reserve space while content is still loading.	npx shadcn@latest add @uiarc/skeleton
Stepper	Show where a person is in a multi-step flow and what is done.	npx shadcn@latest add @uiarc/stepper
Usage meter	Show what fills an allowance and how close it is to the limit.	npx shadcn@latest add @uiarc/usage-meter

Data

Avatars