---
name: "@uiarc"
slug: "uiarc"
description: "React components and blocks with motion built in. Source you own, with Markdown docs and llms.txt so AI tools install them correctly."
category: "Animated components"
tags: ["ai", "animation", "auth", "blocks", "buttons", "cards", "charts", "developer-tools", "editor", "forms", "icons", "loaders", "maps", "media", "navigation", "onboarding", "overlays", "payments", "pro-available", "tables", "text-effects", "theming"]
framework: "react"
license: "MIT"
author: "kuratlielia"
website: "https://uiarc.dev"
github: "https://github.com/kuratlielia/arc-library"
registry: "https://uiarc.dev/r/registry.json"
pro: true
pro_url: "https://uiarc.dev/pro"
github_stars: 595
component_count: 133
generated_at: "2026-10-10T06:32:55.998Z"
---

# @uiarc

React components and blocks with motion built in. Source you own, with Markdown docs and llms.txt so AI tools install them correctly.

## Links

- Website: https://uiarc.dev
- GitHub: https://github.com/kuratlielia/arc-library
- Registry JSON: https://uiarc.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/uiarc
- This file: https://sh4dcn.vercel.app/md/uiarc.md
- Pro / pricing: https://uiarc.dev/pro

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://uiarc.dev/r/registry.json
pnpm dlx shadcn@latest add https://uiarc.dev/r/registry.json
bunx shadcn@latest add https://uiarc.dev/r/registry.json
# clone the source repo
git clone https://github.com/kuratlielia/arc-library.git
# fetch the raw registry index
curl -s https://uiarc.dev/r/registry.json
```

## Components (133)

| name | type | description | install |
| --- | --- | --- | --- |
| arc-foundation | registry:item | Arc design tokens (color, surface, radius, shadow, accent, focus, light and dark themes), plus the shared motion presets. Install once per app. | `npx shadcn@latest add https://uiarc.dev/r/arc-foundation.json` |
| arc-motion-tokens | registry:item | The shared motion presets (durations, easings, springs, staggers) Arc components import. Installed automatically with any item that uses them. | `npx shadcn@latest add https://uiarc.dev/r/arc-motion-tokens.json` |
| arc-skill | registry:file | An Agent Skill that teaches Claude Code and other agents how to choose, install, and compose Arc components, with rule files for design, components, motion, ac… | `npx shadcn@latest add https://uiarc.dev/r/arc-skill.json` |
| button | registry:ui | A clear, responsive action with quiet secondary states. | `npx shadcn@latest add https://uiarc.dev/r/button.json` |
| action-button | registry:ui | A compact button for frequent toolbar actions. | `npx shadcn@latest add https://uiarc.dev/r/action-button.json` |
| split-button | registry:ui | A primary action with a menu of nearby alternatives. | `npx shadcn@latest add https://uiarc.dev/r/split-button.json` |
| button-group | registry:ui | Related actions joined into one surface with hairline dividers: a hover highlight glides between segments, the pressed one answers in place, and an attached me… | `npx shadcn@latest add https://uiarc.dev/r/button-group.json` |
| floating-button-group | registry:ui | Separate soft buttons in a quiet tray, with one shared highlight that morphs from button to button as you move, and a pressed state that settles in place. | `npx shadcn@latest add https://uiarc.dev/r/floating-button-group.json` |
| expanding-button-group | registry:ui | Icon buttons in a compact group: the one you point at or focus grows to reveal its label while its neighbours slide aside, and an action confirms in place. | `npx shadcn@latest add https://uiarc.dev/r/expanding-button-group.json` |
| dropdown-menu | registry:ui | A focused list of actions anchored to a trigger. | `npx shadcn@latest add https://uiarc.dev/r/dropdown-menu.json` |
| context-menu | registry:ui | Secondary actions kept close to the selected object. | `npx shadcn@latest add https://uiarc.dev/r/context-menu.json` |
| copy-button | registry:ui | Copy a value with immediate confirmation. | `npx shadcn@latest add https://uiarc.dev/r/copy-button.json` |
| drawer | registry:ui | A temporary side surface for focused work. | `npx shadcn@latest add https://uiarc.dev/r/drawer.json` |
| theme-switch | registry:ui | Four smooth ways to move between light and dark appearance. | `npx shadcn@latest add https://uiarc.dev/r/theme-switch.json` |
| theme-switch-eclipse | registry:ui | The next appearance crosses the page like an eclipse. | `npx shadcn@latest add https://uiarc.dev/r/theme-switch-eclipse.json` |
| theme-switch-split | registry:ui | The next appearance opens from a slim center seam. | `npx shadcn@latest add https://uiarc.dev/r/theme-switch-split.json` |
| theme-switch-rise | registry:ui | The next appearance rises into place. | `npx shadcn@latest add https://uiarc.dev/r/theme-switch-rise.json` |
| avatar | registry:ui | A compact identity marker for people and accounts. | `npx shadcn@latest add https://uiarc.dev/r/avatar.json` |
| avatar-group | registry:ui | Show a team or set of contributors in a small space. | `npx shadcn@latest add https://uiarc.dev/r/avatar-group.json` |
| input | registry:ui | A single line field with clear labels and useful states. | `npx shadcn@latest add https://uiarc.dev/r/input.json` |
| textarea | registry:ui | A multiline field for notes, descriptions, and longer text. | `npx shadcn@latest add https://uiarc.dev/r/textarea.json` |
| select | registry:ui | A compact choice field with a keyboard friendly menu. | `npx shadcn@latest add https://uiarc.dev/r/select.json` |
| combobox | registry:ui | Search and select from a list without leaving the field. | `npx shadcn@latest add https://uiarc.dev/r/combobox.json` |
| checkbox | registry:ui | A binary choice with a precise, legible state. | `npx shadcn@latest add https://uiarc.dev/r/checkbox.json` |
| switch | registry:ui | A tactile toggle for settings that take effect immediately. | `npx shadcn@latest add https://uiarc.dev/r/switch.json` |
| multi-select | registry:ui | Select several values while keeping the field readable. | `npx shadcn@latest add https://uiarc.dev/r/multi-select.json` |
| number-field | registry:ui | Enter a bounded number with clear increment controls. | `npx shadcn@latest add https://uiarc.dev/r/number-field.json` |
| password-field | registry:ui | Capture sensitive text with a visible reveal control. | `npx shadcn@latest add https://uiarc.dev/r/password-field.json` |
| search-field | registry:ui | A recognizable search entry point with clear affordances. | `npx shadcn@latest add https://uiarc.dev/r/search-field.json` |
| tag-input | registry:ui | Turn short text values into removable tags. | `npx shadcn@latest add https://uiarc.dev/r/tag-input.json` |
| file-dropzone | registry:ui | A generous target for dropping one or more files. | `npx shadcn@latest add https://uiarc.dev/r/file-dropzone.json` |
| radio-group | registry:ui | Choose one option from a visible set. | `npx shadcn@latest add https://uiarc.dev/r/radio-group.json` |
| segmented-control | registry:ui | Switch between a small set of related views. | `npx shadcn@latest add https://uiarc.dev/r/segmented-control.json` |
| calendar | registry:ui | Browse dates in a clear, compact month view. | `npx shadcn@latest add https://uiarc.dev/r/calendar.json` |
| date-picker | registry:ui | Choose a date without losing context. | `npx shadcn@latest add https://uiarc.dev/r/date-picker.json` |
| time-picker | registry:ui | Choose a time with sensible keyboard behavior. | `npx shadcn@latest add https://uiarc.dev/r/time-picker.json` |
| accordion | registry:ui | Progressively reveal supporting information in place. | `npx shadcn@latest add https://uiarc.dev/r/accordion.json` |
| dialog | registry:ui | A focused surface for decisions that need attention. | `npx shadcn@latest add https://uiarc.dev/r/dialog.json` |
| popover | registry:ui | A small anchored surface for contextual information. | `npx shadcn@latest add https://uiarc.dev/r/popover.json` |
| tooltip | registry:ui | Short supporting text for unfamiliar controls. | `npx shadcn@latest add https://uiarc.dev/r/tooltip.json` |
| tabs | registry:ui | Switch between related content in the same context. | `npx shadcn@latest add https://uiarc.dev/r/tabs.json` |
| expandable-card | registry:ui | Give a dense card more room when requested. | `npx shadcn@latest add https://uiarc.dev/r/expandable-card.json` |
| breadcrumb | registry:ui | Show where a page sits in a hierarchy. | `npx shadcn@latest add https://uiarc.dev/r/breadcrumb.json` |
| alert | registry:ui | A persistent message that helps people recover or continue. | `npx shadcn@latest add https://uiarc.dev/r/alert.json` |
| toast | registry:ui | Brief confirmation for a completed background action. | `npx shadcn@latest add https://uiarc.dev/r/toast.json` |
| progress | registry:ui | Show how much of a known task is complete. | `npx shadcn@latest add https://uiarc.dev/r/progress.json` |
| skeleton | registry:ui | Reserve space while content is still loading. | `npx shadcn@latest add https://uiarc.dev/r/skeleton.json` |
| badge | registry:ui | A small label for status, category, or metadata. | `npx shadcn@latest add https://uiarc.dev/r/badge.json` |
| card | registry:ui | A contained group of related content and actions. | `npx shadcn@latest add https://uiarc.dev/r/card.json` |
| metric-card | registry:ui | A compact summary for a number that needs context. | `npx shadcn@latest add https://uiarc.dev/r/metric-card.json` |
| empty-state | registry:ui | A useful next step when there is nothing to show yet. | `npx shadcn@latest add https://uiarc.dev/r/empty-state.json` |
| tree-view | registry:ui | Navigate nested folders and structured content. | `npx shadcn@latest add https://uiarc.dev/r/tree-view.json` |
| pagination | registry:ui | Move through a long collection with clear bounds. | `npx shadcn@latest add https://uiarc.dev/r/pagination.json` |
| filter-toolbar | registry:ui | Keep collection filters close and easy to reset. | `npx shadcn@latest add https://uiarc.dev/r/filter-toolbar.json` |
| sortable-data-table | registry:ui | Compare structured records with sortable columns. | `npx shadcn@latest add https://uiarc.dev/r/sortable-data-table.json` |
| sparkline | registry:ui | Show a compact trend beside a value. | `npx shadcn@latest add https://uiarc.dev/r/sparkline.json` |
| gauge | registry:ui | Show a value against a known range. | `npx shadcn@latest add https://uiarc.dev/r/gauge.json` |
| animated-counter | registry:ui | Give changing totals a clear sense of movement. | `npx shadcn@latest add https://uiarc.dev/r/animated-counter.json` |
| code-block | registry:ui | Present code with legible hierarchy and copy access. | `npx shadcn@latest add https://uiarc.dev/r/code-block.json` |
| text-reveal | registry:ui | Reveal a short piece of content with restrained motion. | `npx shadcn@latest add https://uiarc.dev/r/text-reveal.json` |
| in-view-title | registry:ui | Bring a section title in as it scrolls into view. | `npx shadcn@latest add https://uiarc.dev/r/in-view-title.json` |
| text-morph | registry:ui | Morph a label into its next state, letter by letter. | `npx shadcn@latest add https://uiarc.dev/r/text-morph.json` |
| text-shimmer | registry:ui | Show ongoing work with a calm light across the words. | `npx shadcn@latest add https://uiarc.dev/r/text-shimmer.json` |
| hold-to-confirm | registry:ui | Confirm a destructive action by holding, not tapping. | `npx shadcn@latest add https://uiarc.dev/r/hold-to-confirm.json` |
| swipe-actions | registry:ui | Reveal row actions with a swipe, or from the same actions in a menu. | `npx shadcn@latest add https://uiarc.dev/r/swipe-actions.json` |
| slider | registry:ui | Pick a value or a range on a track that follows your finger. | `npx shadcn@latest add https://uiarc.dev/r/slider.json` |
| elastic-slider | registry:ui | A slider that stretches like rubber past its ends, with a swaying value tag and detents the thumb clicks into. | `npx shadcn@latest add https://uiarc.dev/r/elastic-slider.json` |
| inline-edit | registry:ui | Rename in place: the text becomes a field without moving. | `npx shadcn@latest add https://uiarc.dev/r/inline-edit.json` |
| expanding-search | registry:ui | An icon that morphs into a search field with results beneath it. | `npx shadcn@latest add https://uiarc.dev/r/expanding-search.json` |
| chip-group | registry:ui | Filter by a few facets with chips that morph as you pick them. | `npx shadcn@latest add https://uiarc.dev/r/chip-group.json` |
| password-strength | registry:ui | Show how strong a new password is while it is typed. | `npx shadcn@latest add https://uiarc.dev/r/password-strength.json` |
| bottom-sheet | registry:ui | A sheet that rests at a peek or full height and follows your finger. | `npx shadcn@latest add https://uiarc.dev/r/bottom-sheet.json` |
| hover-card | registry:ui | Preview a person or link on hover or focus without leaving the page. | `npx shadcn@latest add https://uiarc.dev/r/hover-card.json` |
| resizable-panels | registry:ui | Trade space between panes by dragging the divider between them. | `npx shadcn@latest add https://uiarc.dev/r/resizable-panels.json` |
| toast-stack | registry:ui | Stack short results at the edge until you reach for them. | `npx shadcn@latest add https://uiarc.dev/r/toast-stack.json` |
| usage-meter | registry:ui | Show what fills an allowance and how close it is to the limit. | `npx shadcn@latest add https://uiarc.dev/r/usage-meter.json` |
| image-compare | registry:ui | Drag a divider across two images to see what changed. | `npx shadcn@latest add https://uiarc.dev/r/image-compare.json` |
| carousel | registry:ui | Browse a row of slides by dragging, flicking, or arrowing through them. | `npx shadcn@latest add https://uiarc.dev/r/carousel.json` |
| card-stack | registry:ui | Review a deck one card at a time, with a throw and an undo. | `npx shadcn@latest add https://uiarc.dev/r/card-stack.json` |
| bar-chart | registry:ui | Compare one measure across days and scrub any bar for its value. | `npx shadcn@latest add https://uiarc.dev/r/bar-chart.json` |
| activity-heatmap | registry:ui | See a year of activity at a glance, one square per day. | `npx shadcn@latest add https://uiarc.dev/r/activity-heatmap.json` |
| timeline | registry:ui | Follow what happened, newest first, grouped by day. | `npx shadcn@latest add https://uiarc.dev/r/timeline.json` |
| user-menu | registry:ui | Your account, settings, theme, and sign out behind the avatar. Opens as a bottom sheet on phones. | `npx shadcn@latest add https://uiarc.dev/r/user-menu.json` |
| stepper | registry:ui | Show where a person is in a multi-step flow and what is done. | `npx shadcn@latest add https://uiarc.dev/r/stepper.json` |
| signature-pad | registry:ui | Smooth ink that thins with speed, with undo, replay, and PNG or SVG export. | `npx shadcn@latest add https://uiarc.dev/r/signature-pad.json` |
| date-range-picker | registry:ui | A range picker that grows from its trigger into two months with presets and a stretching range highlight. | `npx shadcn@latest add https://uiarc.dev/r/date-range-picker.json` |
| color-picker | registry:ui | A swatch that grows into a picker with format morphing, eyedropper, saved swatches, and contrast readout. | `npx shadcn@latest add https://uiarc.dev/r/color-picker.json` |
| morph-select | registry:ui | A select whose trigger grows into the list, with a gliding highlight and type-ahead. | `npx shadcn@latest add https://uiarc.dev/r/morph-select.json` |
| line-chart | registry:ui | A multi-series line chart with a gliding crosshair, legend toggles, and paths that morph between ranges. | `npx shadcn@latest add https://uiarc.dev/r/line-chart.json` |
| donut-chart | registry:ui | A donut whose arcs morph between datasets, with the active value rolling into the center. | `npx shadcn@latest add https://uiarc.dev/r/donut-chart.json` |
| streamgraph | registry:ui | Layered streams on a wiggle baseline that morph between ranges, with a layer you can isolate and read week by week. | `npx shadcn@latest add https://uiarc.dev/r/streamgraph.json` |
| brush-chart | registry:ui | A dense time series with an overview strip: drag a window to zoom, resize it by its handles, and read events in place. | `npx shadcn@latest add https://uiarc.dev/r/brush-chart.json` |
| ridgeline | registry:ui | Overlapping distributions, one ridge per group: hover to lift a ridge and read its quartiles, switch datasets and every curve morphs. | `npx shadcn@latest add https://uiarc.dev/r/ridgeline.json` |
| treemap | registry:ui | A squarified treemap: click to drill and the tiles grow to fill the view, with a breadcrumb back and metrics that morph every tile. | `npx shadcn@latest add https://uiarc.dev/r/treemap.json` |
| waffle-chart | registry:ui | A ten by ten unit chart where every cell is one percent, and cells fly to their new group when the data changes. | `npx shadcn@latest add https://uiarc.dev/r/waffle-chart.json` |
| slope-chart | registry:ui | Before and after on two axes: lines draw in, rank moves sit beside each value, and switching datasets slides every line to its new slope. | `npx shadcn@latest add https://uiarc.dev/r/slope-chart.json` |
| countdown | registry:ui | A launch countdown with rolling digits that morphs into a live state at zero. | `npx shadcn@latest add https://uiarc.dev/r/countdown.json` |
| announcement-bar | registry:ui | A top banner that rotates messages, counts down, and collapses smoothly when dismissed. | `npx shadcn@latest add https://uiarc.dev/r/announcement-bar.json` |
| json-viewer | registry:ui | A collapsible JSON tree with search, paging for long arrays, and copy value or path. | `npx shadcn@latest add https://uiarc.dev/r/json-viewer.json` |
| phone-input | registry:ui | A phone field with a country picker, formatting as you type, and E.164 output. | `npx shadcn@latest add https://uiarc.dev/r/phone-input.json` |
| money-input | registry:ui | A currency field with live grouping, stable width, rolling digits, and minor-unit output. | `npx shadcn@latest add https://uiarc.dev/r/money-input.json` |
| shortcut-recorder | registry:ui | Record key combinations into key caps, with conflict warnings, Kbd, and a searchable cheatsheet. | `npx shadcn@latest add https://uiarc.dev/r/shortcut-recorder.json` |
| confirm-morph | registry:ui | A destructive button that morphs into an inline confirmation, a spinner, and a result with undo. | `npx shadcn@latest add https://uiarc.dev/r/confirm-morph.json` |
| mention-input | registry:ui | A textarea with @people and #channel mentions that act as single tokens, with suggestions at the caret. | `npx shadcn@latest add https://uiarc.dev/r/mention-input.json` |
| chat-thread | registry:ui | A chat thread with grouped messages, reactions, read receipts, typing, and a composer with attachments. | `npx shadcn@latest add https://uiarc.dev/r/chat-thread.json` |
| rich-text-editor | registry:ui | A lightweight editor with markdown shortcuts, a floating toolbar, a slash menu, and HTML and markdown output. | `npx shadcn@latest add https://uiarc.dev/r/rich-text-editor.json` |
| billing-toggle | registry:ui | A monthly and yearly switch with a savings badge and prices that roll to the new amount. | `npx shadcn@latest add https://uiarc.dev/r/billing-toggle.json` |
| scroll-area | registry:ui | A native scroll container with thin overlay scrollbars and edge fades that appear only when content overflows. | `npx shadcn@latest add https://uiarc.dev/r/scroll-area.json` |
| radio-cards | registry:ui | Selectable option cards with a sliding selection ring, price and description slots, and radio keyboard behavior. | `npx shadcn@latest add https://uiarc.dev/r/radio-cards.json` |
| comment-thread | registry:ui | Threaded comments with replies, reactions, mentions, inline edit, and resolve. | `npx shadcn@latest add https://uiarc.dev/r/comment-thread.json` |
| slot-text | registry:ui | Text and numbers that spin into their new value on staggered slot machine reels. | `npx shadcn@latest add https://uiarc.dev/r/slot-text.json` |
| signup-form | registry:block | An account creation flow with field validation, password strength, and a clear completion state. | `npx shadcn@latest add https://uiarc.dev/r/signup-form.json` |
| logo-marquee | registry:block | A quiet, continuously moving row of brand marks with a pause control. | `npx shadcn@latest add https://uiarc.dev/r/logo-marquee.json` |
| plan-comparison | registry:block | Compare meaningful differences between plans and billing periods. | `npx shadcn@latest add https://uiarc.dev/r/plan-comparison.json` |
| command-palette | registry:block | A complete keyboard driven action surface with search, grouped results, and shortcuts. | `npx shadcn@latest add https://uiarc.dev/r/command-palette.json` |
| notification-center | registry:block | A home for updates with read state, grouped information, and animated disclosure. | `npx shadcn@latest add https://uiarc.dev/r/notification-center.json` |
| file-upload | registry:block | A complete file selection flow with constraints, progress, and error feedback. | `npx shadcn@latest add https://uiarc.dev/r/file-upload.json` |
| otp-input | registry:block | A six digit verification flow with paste support and keyboard navigation. | `npx shadcn@latest add https://uiarc.dev/r/otp-input.json` |
| changelog-feed | registry:block | Release notes you can filter, open in place, and scroll through month by month. | `npx shadcn@latest add https://uiarc.dev/r/changelog-feed.json` |
| sign-in | registry:block | A sign in card that morphs from email to a six digit code to your account. | `npx shadcn@latest add https://uiarc.dev/r/sign-in.json` |
| page-header | registry:block | A project page header that folds into a compact bar as you scroll, with tabs whose counts roll. | `npx shadcn@latest add https://uiarc.dev/r/page-header.json` |
| empty-states | registry:block | Four empty states in one illustration whose shapes morph between scenes as you switch tabs. | `npx shadcn@latest add https://uiarc.dev/r/empty-states.json` |
| login-centered | registry:block | A passkey-first login card on a quiet ring backdrop that morphs through email and code. | `npx shadcn@latest add https://uiarc.dev/r/login-centered.json` |
| site-header | registry:block | A sticky website header that turns solid on scroll, with a gliding active link, mega menu panels, and a mobile sheet. | `npx shadcn@latest add https://uiarc.dev/r/site-header.json` |
| site-footer | registry:block | A website footer with link columns and newsletter, a minimal layout, and a large fading Arc mark. | `npx shadcn@latest add https://uiarc.dev/r/site-footer.json` |
| hero-section | registry:block | Three full screen SaaS heroes: a live dashboard rising from the bottom edge over a drifting mesh, a workflow graph that routes sample events node by node, and … | `npx shadcn@latest add https://uiarc.dev/r/hero-section.json` |
| faq-section | registry:block | FAQs as an accordion, a topic rail, or a searchable list that highlights matches. | `npx shadcn@latest add https://uiarc.dev/r/faq-section.json` |
| contact-section | registry:block | A validated contact form that morphs into a confirmation, support channels, and office cards with local times. | `npx shadcn@latest add https://uiarc.dev/r/contact-section.json` |
| blog-grid | registry:block | A blog index with a featured post, category filter, post cards, pagination and an in-place reader. | `npx shadcn@latest add https://uiarc.dev/r/blog-grid.json` |
| comparison-table | registry:block | An us versus them table with a sticky header, a highlighted column, and a stacked phone view. | `npx shadcn@latest add https://uiarc.dev/r/comparison-table.json` |
| stats-band | registry:block | Headline numbers that count up in view, each with a tiny visual that proves it and a context line on hover, plain or in a hairline grid. | `npx shadcn@latest add https://uiarc.dev/r/stats-band.json` |
| cta-section | registry:block | A call to action as a centered closing section, a split beside a setup card that completes itself, or a dismissible banner. | `npx shadcn@latest add https://uiarc.dev/r/cta-section.json` |
| newsletter-signup | registry:block | An email signup framed by a stack of past issues; subscribing drops the next issue, addressed to you, onto the front. | `npx shadcn@latest add https://uiarc.dev/r/newsletter-signup.json` |

## For AI agents

```text
You are adding components from @uiarc to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/uiarc.md) for the component list.
2. Fetch the machine-readable index: https://uiarc.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: uiarc).
```