# Arc > Arc is a React component and block library designed for AI-assisted frontend development. It provides copy-paste components, complete interface blocks, machine-readable registry metadata, AI skills, and MCP compatibility. Components and blocks share design tokens, CSS modules, and Motion. Free items install with the shadcn CLI from a public registry; Pro items are licensed and install from the token-gated @uiarc-pro registry. 119 of 219 items are free. Component links point to per-component markdown with when to use it, when not to, usage, props, keyboard, accessibility, motion, responsive, and performance notes. Block links point to per-block markdown with variants, props, sample data, and install notes. ## Install Arc items are shadcn-compatible registry items. Each one pulls in `arc-foundation` (design and motion tokens) and any Arc components it builds on. ```bash npx shadcn@latest add https://uiarc.dev/r/button.json ``` Or register the namespace once in `components.json` and install by name: ```json { "registries": { "@uiarc": "https://uiarc.dev/r/{name}.json" } } ``` ```bash npx shadcn@latest add @uiarc/button @uiarc/dialog ``` After the first install, import the tokens once in the root layout: `import "@/registry/foundation.css";`. Files install at the project root (`registry/…`, `lib/motion-tokens.ts`) and import each other through the `@/*` alias, so map `@/*` to `./*` in `tsconfig.json` (for a `src/` project add `"@/registry/*": ["./registry/*"]` and `"@/lib/motion-tokens": ["./lib/motion-tokens.ts"]`). Components use CSS modules and CSS variables, not Tailwind classes. Dark mode: `data-theme="dark"` on ``. Accent: `data-accent` = neutral, violet, blue, green, amber, orange, coral, or rose. ### Pro items Pro components, blocks, and templates install from the token-gated `@uiarc-pro` registry. A Pro member creates a token (`arc_pro_…`) at https://uiarc.dev/account#pro-access, sets `ARC_PRO_TOKEN` in the environment or `.env.local` (never committed), and adds the registry to `components.json`: ```json { "registries": { "@uiarc": "https://uiarc.dev/r/{name}.json", "@uiarc-pro": { "url": "https://uiarc.dev/r/pro/{name}.json", "headers": { "Authorization": "Bearer ${ARC_PRO_TOKEN}" } } } } ``` ```bash npx shadcn@latest add @uiarc-pro/dock ``` The MCP server accepts the same token as `Authorization: Bearer …`: `get_component` then returns Pro source and `get_install_command` returns `@uiarc-pro` commands. Without a token, never reconstruct a Pro item; offer a free alternative or https://uiarc.dev/pricing. Setup: https://uiarc.dev/docs/ai#pro-access ## Rules for agents - Prefer an existing Arc component or block over writing a new one; compose blocks from Arc components. - Read the component's markdown before using it; use only documented props. - Keep semantic HTML, keyboard behavior, and a reduced-motion branch for every animation. - Use the semantic tokens (`--background`, `--surface`, `--foreground`, `--text-secondary`, `--border`, `--accent`, `--success`, `--warning`, `--danger`) instead of raw colors, and check light and dark themes. - Use motion presets from `lib/motion-tokens.ts` (`snappy` for presses, `smooth` for panels, `morph` for shared highlights). Motion should explain cause and effect. - Sentence case copy, regular and medium weights only, no eyebrow labels, no em dashes, no focus rings, no decorative gradients or glows. - Pro items are licensed: never reconstruct their source; point people to the pricing page. ## Skills Install every free skill file with `npx shadcn@latest add https://uiarc.dev/r/arc-skill.json`, or read them directly: - [SKILL.md](https://uiarc.dev/r/skills/arc/SKILL.md): Entry point: workflow, principles, never-do list, and quick decisions - [INSTRUCTIONS.md](https://uiarc.dev/r/skills/arc/INSTRUCTIONS.md): Short always-on rules for AGENTS.md, CLAUDE.md, or Cursor rules - [checklist.md](https://uiarc.dev/r/skills/arc/checklist.md): The review loop to run before finishing, with grep sweeps - [components.md](https://uiarc.dev/r/skills/arc/components.md): Choosing the right component or block by job, with ids - [composition.md](https://uiarc.dev/r/skills/arc/composition.md): Page containers, dashboards, marketing sections, states, React correctness - [copy.md](https://uiarc.dev/r/skills/arc/copy.md): Sentence case, no eyebrows or em dashes, verbs on buttons, honest claims - [design.md](https://uiarc.dev/r/skills/arc/design.md): Color, type, surfaces, concentric radii, spacing, and icons - [motion.md](https://uiarc.dev/r/skills/arc/motion.md): Motion tokens, spring choice, patterns with code, reduced motion - [accessibility.md](https://uiarc.dev/r/skills/arc/accessibility.md): Focus without rings, semantics, keyboard, and announcements - [responsive.md](https://uiarc.dev/r/skills/arc/responsive.md): Widths to check, overflow, tables, and touch targets - [example-settings.md](https://uiarc.dev/r/skills/arc/example-settings.md): A worked account settings page - [example-pricing.md](https://uiarc.dev/r/skills/arc/example-pricing.md): A worked pricing section with plans, comparison, and FAQ - [example-dashboard.md](https://uiarc.dev/r/skills/arc/example-dashboard.md): A worked analytics overview with KPIs, chart, and table Pro skills (Arc Pro, served to signed-in Pro members at https://uiarc.dev/api/skills): - Arc Pro skill: Entry point: picks the right Pro workflow and sets up Pro access - Full-page generation: Brief, plan, build, and verify a whole page against the checklist - Page composition: Plan a page region by region with the right blocks and every state - Design system generation: A brand theme on Arc tokens with contrast checked in both themes - Refactor to Arc: Migrate custom, shadcn/ui, MUI, or Chakra UI to Arc with parity checks - Motion audit: Inventory every animation, assign tokens, cut motion that explains nothing - Responsive audit: Measure five widths, fix overflow, layout, and touch, then re-measure - Accessibility audit: A ranked audit of structure, keyboard, contrast, and motion with patches ## Guides - [All guides](https://uiarc.dev/guides): Step-by-step builds with Arc components and blocks - [SaaS dashboard in React](https://uiarc.dev/guides/saas-dashboard-react): Shell, metrics, tables, and states for a product dashboard - [React motion: springs and reduced motion](https://uiarc.dev/guides/react-motion-springs-reduced-motion): Choosing springs and writing a reduced-motion branch - [shadcn registry for AI coding tools](https://uiarc.dev/guides/shadcn-registry-ai-coding-tools): Installing Arc through the registry, MCP, and llms.txt - [React settings page](https://uiarc.dev/guides/react-settings-page): Forms, switches, and destructive actions on one settings screen - [Onboarding flows](https://uiarc.dev/guides/onboarding-flows): Multi-step setup with progress and in-place confirmation - [React command menu](https://uiarc.dev/guides/react-command-menu): A keyboard-first command palette for global search and actions ## Templates - [Templates](https://uiarc.dev/templates) (Pro): Complete starter apps built from Arc blocks - Arc SaaS (Pro): A complete SaaS starter - Arc AI (Pro): A complete AI application - Arc Startup (Pro): A complete marketing site ## Docs - [AI setup](https://uiarc.dev/docs/ai): Connect the MCP server, install the agent skill, and use the registry - [Agent skill](https://uiarc.dev/r/skills/arc/SKILL.md): Drop-in SKILL.md for Claude Code and other agents (install with `npx shadcn@latest add https://uiarc.dev/r/arc-skill.json`) - [Agent instructions](https://uiarc.dev/r/skills/arc/INSTRUCTIONS.md): The rules to keep in AGENTS.md, CLAUDE.md, or Cursor rules - [Skill index](https://uiarc.dev/r/skills/index.json): Every skill file as JSON - [MCP server](https://uiarc.dev/api/mcp): Streamable HTTP endpoint with list, search, get, install, and skill tools - [Registry index](https://uiarc.dev/r/registry.json): shadcn registry of every installable item - [Catalog](https://uiarc.dev/r/catalog.json): Machine-readable metadata for every component and block, including Pro - [Full context](https://uiarc.dev/llms-full.txt): This file with every component's markdown inlined - [Small context](https://uiarc.dev/llms-small.txt): Overview, install, and one line per item, for small context windows ## Components ### Actions - [Button](https://uiarc.dev/components/button/markdown): A clear, responsive action with quiet secondary states. - [Action button](https://uiarc.dev/components/action-button/markdown): A compact button for frequent toolbar actions. - [Split button](https://uiarc.dev/components/split-button/markdown): A primary action with a menu of nearby alternatives. - [Copy button](https://uiarc.dev/components/copy-button/markdown): Copy a value with immediate confirmation. - [Confirm morph](https://uiarc.dev/components/confirm-morph/markdown): A destructive button that morphs into an inline confirmation, a spinner, and a result with undo. - [Hold to confirm](https://uiarc.dev/components/hold-to-confirm/markdown): Confirm a destructive action by holding, not tapping. - [Swipe actions](https://uiarc.dev/components/swipe-actions/markdown): Reveal row actions with a swipe, or from the same actions in a menu. - [Dropdown menu](https://uiarc.dev/components/dropdown-menu/markdown): A focused list of actions anchored to a trigger. - [Context menu](https://uiarc.dev/components/context-menu/markdown): Secondary actions kept close to the selected object. - [User menu](https://uiarc.dev/components/user-menu/markdown): Your account, settings, theme, and sign out behind the avatar. Opens as a bottom sheet on phones. - [Theme switcher](https://uiarc.dev/components/theme-switch/markdown): Four smooth ways to move between light and dark appearance. - [Eclipse](https://uiarc.dev/components/theme-switch-eclipse/markdown): The next appearance crosses the page like an eclipse. - [Split](https://uiarc.dev/components/theme-switch-split/markdown): The next appearance opens from a slim center seam. - [Rise](https://uiarc.dev/components/theme-switch-rise/markdown): The next appearance rises into place. ### Inputs - [Input](https://uiarc.dev/components/input/markdown): A single line field with clear labels and useful states. - [Textarea](https://uiarc.dev/components/textarea/markdown): A multiline field for notes, descriptions, and longer text. - [Password field](https://uiarc.dev/components/password-field/markdown): Capture sensitive text with a visible reveal control. - [Search field](https://uiarc.dev/components/search-field/markdown): A recognizable search entry point with clear affordances. - [Inline edit](https://uiarc.dev/components/inline-edit/markdown): Rename in place: the text becomes a field without moving. - [Number field](https://uiarc.dev/components/number-field/markdown): Enter a bounded number with clear increment controls. - [Phone input](https://uiarc.dev/components/phone-input/markdown): A phone field with a country picker, formatting as you type, and E.164 output. - [Tag input](https://uiarc.dev/components/tag-input/markdown): Turn short text values into removable tags. - [Mention input](https://uiarc.dev/components/mention-input/markdown): A textarea with @people and #channel mentions that act as single tokens, with suggestions at the caret. - [Shortcut recorder](https://uiarc.dev/components/shortcut-recorder/markdown): Record key combinations into key caps, with conflict warnings, Kbd, and a searchable cheatsheet. - [Select](https://uiarc.dev/components/select/markdown): A compact choice field with a keyboard friendly menu. - [Combobox](https://uiarc.dev/components/combobox/markdown): Search and select from a list without leaving the field. - [Multi-select](https://uiarc.dev/components/multi-select/markdown): Select several values while keeping the field readable. - [Chip group](https://uiarc.dev/components/chip-group/markdown): Filter by a few facets with chips that morph as you pick them. - [Radio cards](https://uiarc.dev/components/radio-cards/markdown): Selectable option cards with a sliding selection ring, price and description slots, and radio keyboard behavior. - [Billing toggle](https://uiarc.dev/components/billing-toggle/markdown): A monthly and yearly switch with a savings badge and prices that roll to the new amount. - [Checkbox](https://uiarc.dev/components/checkbox/markdown): A binary choice with a precise, legible state. - [Radio group](https://uiarc.dev/components/radio-group/markdown): Choose one option from a visible set. - [Switch](https://uiarc.dev/components/switch/markdown): A tactile toggle for settings that take effect immediately. - [Segmented control](https://uiarc.dev/components/segmented-control/markdown): Switch between a small set of related views. - [Slider](https://uiarc.dev/components/slider/markdown): Pick a value or a range on a track that follows your finger. - [Calendar](https://uiarc.dev/components/calendar/markdown): Browse dates in a clear, compact month view. - [Date picker](https://uiarc.dev/components/date-picker/markdown): Choose a date without losing context. - [Date range picker](https://uiarc.dev/components/date-range-picker/markdown): A range picker that grows from its trigger into two months with presets and a stretching range highlight. - [Time picker](https://uiarc.dev/components/time-picker/markdown): Choose a time with sensible keyboard behavior. - [Color picker](https://uiarc.dev/components/color-picker/markdown): A swatch that grows into a picker with format morphing, eyedropper, saved swatches, and contrast readout. - [Rich text editor](https://uiarc.dev/components/rich-text-editor/markdown): A lightweight editor with markdown shortcuts, a floating toolbar, a slash menu, and HTML and markdown output. - [Signature pad](https://uiarc.dev/components/signature-pad/markdown): Smooth ink that thins with speed, with undo, replay, and PNG or SVG export. - [File dropzone](https://uiarc.dev/components/file-dropzone/markdown): A generous target for dropping one or more files. ### Disclosure - [Tabs](https://uiarc.dev/components/tabs/markdown): Switch between related content in the same context. - [Breadcrumb](https://uiarc.dev/components/breadcrumb/markdown): Show where a page sits in a hierarchy. - [Scroll area](https://uiarc.dev/components/scroll-area/markdown): A native scroll container with thin overlay scrollbars and edge fades that appear only when content overflows. - [Accordion](https://uiarc.dev/components/accordion/markdown): Progressively reveal supporting information in place. - [Expandable card](https://uiarc.dev/components/expandable-card/markdown): Give a dense card more room when requested. - [Resizable panels](https://uiarc.dev/components/resizable-panels/markdown): Trade space between panes by dragging the divider between them. - [Dialog](https://uiarc.dev/components/dialog/markdown): A focused surface for decisions that need attention. - [Drawer](https://uiarc.dev/components/drawer/markdown): A temporary side surface for focused work. - [Bottom sheet](https://uiarc.dev/components/bottom-sheet/markdown): A sheet that rests at a peek or full height and follows your finger. - [Popover](https://uiarc.dev/components/popover/markdown): A small anchored surface for contextual information. - [Hover card](https://uiarc.dev/components/hover-card/markdown): Preview a person or link on hover or focus without leaving the page. - [Tooltip](https://uiarc.dev/components/tooltip/markdown): Short supporting text for unfamiliar controls. ### Feedback - [Alert](https://uiarc.dev/components/alert/markdown): A persistent message that helps people recover or continue. - [Toast](https://uiarc.dev/components/toast/markdown): Brief confirmation for a completed background action. - [Toast stack](https://uiarc.dev/components/toast-stack/markdown): Stack short results at the edge until you reach for them. - [Announcement bar](https://uiarc.dev/components/announcement-bar/markdown): A top banner that rotates messages, counts down, and collapses smoothly when dismissed. - [Progress](https://uiarc.dev/components/progress/markdown): Show how much of a known task is complete. - [Skeleton](https://uiarc.dev/components/skeleton/markdown): Reserve space while content is still loading. - [Stepper](https://uiarc.dev/components/stepper/markdown): Show where a person is in a multi-step flow and what is done. - [Usage meter](https://uiarc.dev/components/usage-meter/markdown): Show what fills an allowance and how close it is to the limit. ### Data - [Pagination](https://uiarc.dev/components/pagination/markdown): Move through a long collection with clear bounds. - [Avatar](https://uiarc.dev/components/avatar/markdown): A compact identity marker for people and accounts. - [Avatar group](https://uiarc.dev/components/avatar-group/markdown): Show a team or set of contributors in a small space. - [Badge](https://uiarc.dev/components/badge/markdown): A small label for status, category, or metadata. - [Card](https://uiarc.dev/components/card/markdown): A contained group of related content and actions. - [Metric card](https://uiarc.dev/components/metric-card/markdown): A compact summary for a number that needs context. - [Empty state](https://uiarc.dev/components/empty-state/markdown): A useful next step when there is nothing to show yet. - [Line chart](https://uiarc.dev/components/line-chart/markdown): A multi-series line chart with a gliding crosshair, legend toggles, and paths that morph between ranges. - [Bar chart](https://uiarc.dev/components/bar-chart/markdown): Compare one measure across days and scrub any bar for its value. - [Donut chart](https://uiarc.dev/components/donut-chart/markdown): A donut whose arcs morph between datasets, with the active value rolling into the center. - [Streamgraph](https://uiarc.dev/components/streamgraph/markdown): Layered streams on a wiggle baseline that morph between ranges, with a layer you can isolate and read week by week. - [Brush chart](https://uiarc.dev/components/brush-chart/markdown): A dense time series with an overview strip: drag a window to zoom, resize it by its handles, and read events in place. - [Waffle chart](https://uiarc.dev/components/waffle-chart/markdown): A ten by ten unit chart where every cell is one percent, and cells fly to their new group when the data changes. - [Slope chart](https://uiarc.dev/components/slope-chart/markdown): 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. - [Sparkline](https://uiarc.dev/components/sparkline/markdown): Show a compact trend beside a value. - [Gauge](https://uiarc.dev/components/gauge/markdown): Show a value against a known range. - [Activity heatmap](https://uiarc.dev/components/activity-heatmap/markdown): See a year of activity at a glance, one square per day. - [Animated counter](https://uiarc.dev/components/animated-counter/markdown): Give changing totals a clear sense of movement. - [Ridgeline](https://uiarc.dev/components/ridgeline/markdown): Overlapping distributions, one ridge per group: hover to lift a ridge and read its quartiles, switch datasets and every curve morphs. - [Treemap](https://uiarc.dev/components/treemap/markdown): A squarified treemap: click to drill and the tiles grow to fill the view, with a breadcrumb back and metrics that morph every tile. - [Sunburst](https://uiarc.dev/components/sunburst/markdown) (Pro): A hierarchy in rings: click a segment and every arc swings around it as the new centre, with a breadcrumb back and a rolling total. - [Sankey flow](https://uiarc.dev/components/sankey-flow/markdown) (Pro): Flows between stages as ribbons with drifting particles; hover any node or ribbon to pour its share through the whole journey. - [Funnel chart](https://uiarc.dev/components/funnel-chart/markdown) (Pro): A tapered conversion funnel with drop-off at every step, a device split that morphs the band, and dots that stream through it. - [Radar chart](https://uiarc.dev/components/radar-chart/markdown) (Pro): Two or three profiles on one web: shapes morph when you swap a profile, and a sweep across the axes compares values in place. - [Realtime stream](https://uiarc.dev/components/realtime-stream/markdown) (Pro): A live line that scrolls at 60fps as readings arrive, holds still on hover to read, and pops a marker on every anomaly. - [Race bar chart](https://uiarc.dev/components/race-bar-chart/markdown) (Pro): A ranking over time: bars overtake each other on springs, values count up, and a timeline you can play or scrub. - [Data grid](https://uiarc.dev/components/data-grid/markdown) (Pro): A spreadsheet grid with range selection, inline editing, a fill handle, and animated sorting. - [Sortable data table](https://uiarc.dev/components/sortable-data-table/markdown): Compare structured records with sortable columns. - [Tree view](https://uiarc.dev/components/tree-view/markdown): Navigate nested folders and structured content. - [Filter toolbar](https://uiarc.dev/components/filter-toolbar/markdown): Keep collection filters close and easy to reset. - [Code block](https://uiarc.dev/components/code-block/markdown): Present code with legible hierarchy and copy access. - [Timeline](https://uiarc.dev/components/timeline/markdown): Follow what happened, newest first, grouped by day. - [Comment thread](https://uiarc.dev/components/comment-thread/markdown): Threaded comments with replies, reactions, mentions, inline edit, and resolve. - [Chat thread](https://uiarc.dev/components/chat-thread/markdown): A chat thread with grouped messages, reactions, read receipts, typing, and a composer with attachments. - [Image compare](https://uiarc.dev/components/image-compare/markdown): Drag a divider across two images to see what changed. - [Carousel](https://uiarc.dev/components/carousel/markdown): Browse a row of slides by dragging, flicking, or arrowing through them. ### Text - [Text reveal](https://uiarc.dev/components/text-reveal/markdown): Reveal a short piece of content with restrained motion. - [In-view title](https://uiarc.dev/components/in-view-title/markdown): Bring a section title in as it scrolls into view. - [Text morph](https://uiarc.dev/components/text-morph/markdown): Morph a label into its next state, letter by letter. - [Text shimmer](https://uiarc.dev/components/text-shimmer/markdown): Show ongoing work with a calm light across the words. ### Special - [Share sheet](https://uiarc.dev/components/share-sheet/markdown) (Pro): A Share button that opens into a panel with copy link, access level, channels, and people to send to. - [Action morph](https://uiarc.dev/components/action-morph/markdown) (Pro): A floating button that morphs into a quick-action menu, then an inline form, then back with a check. - [Morph nav](https://uiarc.dev/components/morph-nav/markdown) (Pro): A navigation bar that morphs into rich menus, search, and a compact state as one surface. - [Dock](https://uiarc.dev/components/dock/markdown) (Pro): A floating tool dock with a gliding label, a springy selection, and trays that grow out of it. - [Liquid tab bar](https://uiarc.dev/components/liquid-tab-bar/markdown) (Pro): Tabs with a liquid selection that stretches between them and fills in icons as it passes. - [Orbit menu](https://uiarc.dev/components/orbit-menu/markdown) (Pro): Hold a button and its actions orbit out, ready to pick with a drag. - [Glass card](https://uiarc.dev/components/glass-card/markdown) (Pro): A glass info panel over a photo whose rim catches a pointer-following highlight while the card tilts; tap to morph it into a detail sheet. - [Glass tab bar](https://uiarc.dev/components/glass-tabbar/markdown) (Pro): A floating Liquid Glass tab bar that refracts what scrolls beneath it, with a glass lens that glides, magnifies and can be dragged between tabs, and an optional search bubble; it compacts on scroll down. - [Sheet stack](https://uiarc.dev/components/sheet-stack/markdown) (Pro): Nested sheets that stack with depth, drag to dismiss, and become stacked dialogs on wide screens. - [Wallet stack](https://uiarc.dev/components/wallet-stack/markdown) (Pro): Fan a stack of cards and lift one out to see its activity. - [Control center](https://uiarc.dev/components/control-center/markdown) (Pro): Workspace quick settings: tiles that morph into detail, a duration dial, and rubber-banded meters. - [Link unfurl](https://uiarc.dev/components/link-unfurl/markdown) (Pro): A composer where pasting a URL shows a loading shimmer on the link, then unfurls it into a rich preview card with title, image and favicon in one morph, which can be collapsed back to the inline link or removed. - [Product gallery](https://uiarc.dev/components/product-gallery/markdown) (Pro): A product gallery with a hover magnifier, gliding thumbnails, and color and size variants that crossfade photos. - [Lightbox gallery](https://uiarc.dev/components/lightbox-gallery/markdown) (Pro): A masonry grid where photos zoom from their slot into a viewer you can swipe, pinch, and drag away. - [Photo grid](https://uiarc.dev/components/photo-grid/markdown) (Pro): Pinch through zoom levels and open any photo straight from its cell. - [Cover flow](https://uiarc.dev/components/cover-flow/markdown) (Pro): A depth rail of images you can throw, with soft grounded shadows and a quiet reflection. - [Voice orb](https://uiarc.dev/components/voice-orb/markdown) (Pro): A voice mode orb that listens, thinks, and speaks, with a live transcript and call controls. - [Now playing](https://uiarc.dev/components/now-playing/markdown) (Pro): Grow a mini player into the full player in one continuous morph. - [Voice recorder](https://uiarc.dev/components/voice-recorder/markdown) (Pro): Record with a live waveform, review and scrub, then send the take into the thread. - [Booking pill](https://uiarc.dev/components/booking-pill/markdown) (Pro): One pill that reshapes through party size, date, time, and a ticket. - [Activity rings](https://uiarc.dev/components/activity-rings/markdown) (Pro): Daily goals as tick rings that sweep, count up, and trace a second lap past 100%. - [Time dial](https://uiarc.dev/components/time-dial/markdown) (Pro): Spin a dial to pick an hour and see which team cities are at work. - [Date reel](https://uiarc.dev/components/date-reel/markdown) (Pro): A 3D wheel date and time picker (like iOS reels) with momentum scrolling, snapping, curved perspective, and full keyboard support. - [Slot text](https://uiarc.dev/components/slot-text/markdown): Text and numbers that spin into their new value on staggered slot machine reels. - [Typewriter terminal](https://uiarc.dev/components/typewriter-terminal/markdown) (Pro): A terminal that types a scripted CLI session with a seeded human cadence, colors the shell syntax, and streams output lines, progress bars and spinners, with a scrubber, play/pause and replay controls. - [Stretch refresh](https://uiarc.dev/components/stretch-refresh/markdown) (Pro): Pull a feed down and a line stretches to tell you when to let go. - [Morph loader](https://uiarc.dev/components/morph-loader/markdown) (Pro): Tiny loaders that morph between shapes and fold into a check or a cross when done. - [Skeleton morph](https://uiarc.dev/components/skeleton-morph/markdown) (Pro): Loading skeletons that grow into the real content, block by block, instead of swapping. - [Orbit logos](https://uiarc.dev/components/orbit-logos/markdown) (Pro): An integrations showcase with brand logos orbiting your product mark on tilted rings. Hover or focus one to rest the orbit, draw a connection, and see what it does. - [Dot grid](https://uiarc.dev/components/dot-grid/markdown) (Pro): A dot field that bulges around the cursor like a lens and ripples from every click. - [Data flow](https://uiarc.dev/components/data-flow/markdown) (Pro): Data flow illustration. Sources (app, database, events) are on the left, a processing core with a live count sits in the middle, and destinations (warehouse, dashboard, alerts) are on the right. Records leave as hollow dots and travel curved paths. In the core they turn into solid accent squares, then fan out to each destination; alerts receives about every third record. - [Payment flow](https://uiarc.dev/components/payment-flow/markdown) (Pro): A card tap goes to a processor, then the network, then the bank and back with authorization, then settlement; each hop lights up with a status label and the amount travels as a chip. - [Multi-region failover](https://uiarc.dev/components/multi-region-failover/markdown) (Pro): Animated multi-region failover on a 2.5D stage: users stream requests through a global load balancer to two regions; the primary degrades, fails three health checks, traffic shifts smoothly to the healthy region, then it recovers, passes three checks and traffic ramps back to an even split. - [Vector search](https://uiarc.dev/components/vector-search/markdown) (Pro): Documents drop onto a tilted embedding plane and fold into points that cluster by topic; the index links neighbours, a query is typed, embedded and lowered onto the plane, a signal hops along the graph toward it, and a widening ring lights the nearest documents with connecting lines, similarity scores and a ranked list. ## Blocks - [Release readiness](https://uiarc.dev/components/blocks/release-readiness/markdown) (Pro): A launch checklist that keeps prerequisites, progress, and the final action together. - [Sign up form](https://uiarc.dev/components/blocks/signup-form/markdown): An account creation flow with field validation, password strength, and a clear completion state. - [Wallet card](https://uiarc.dev/components/blocks/wallet-card/markdown) (Pro): A compact account view with balance, recent activity, and focused money actions. - [Logo marquee](https://uiarc.dev/components/blocks/logo-marquee/markdown): A quiet, continuously moving row of brand marks with a pause control. - [Team directory](https://uiarc.dev/components/blocks/team-directory/markdown) (Pro): Searchable people, team filters, and a focused profile panel. - [Project board](https://uiarc.dev/components/blocks/project-board/markdown) (Pro): A living workflow board for moving work between stages. - [Invoice studio](https://uiarc.dev/components/blocks/invoice-studio/markdown) (Pro): An editable invoice with live totals and a clear save flow. - [Plan comparison](https://uiarc.dev/components/blocks/plan-comparison/markdown): Compare meaningful differences between plans and billing periods. - [Availability picker](https://uiarc.dev/components/blocks/availability-picker/markdown) (Pro): Find a meeting time across people and see the choice come together. - [Metrics dashboard](https://uiarc.dev/components/blocks/metrics-dashboard/markdown) (Pro): A dense analytics view with KPI tabs, one inspectable chart, and top pages and sources. - [Media player](https://uiarc.dev/components/blocks/media-player/markdown) (Pro): An audio player with a living playlist and complete playback controls. - [Support conversation](https://uiarc.dev/components/blocks/support-conversation/markdown) (Pro): A responsive message thread with useful quick replies and live feedback. - [Inbox triage](https://uiarc.dev/components/blocks/inbox-triage/markdown) (Pro): Process a focused inbox with archive, snooze, and restore actions. - [Command palette](https://uiarc.dev/components/blocks/command-palette/markdown): A complete keyboard driven action surface with search, grouped results, and shortcuts. - [Notification center](https://uiarc.dev/components/blocks/notification-center/markdown): A home for updates with read state, grouped information, and animated disclosure. - [File upload](https://uiarc.dev/components/blocks/file-upload/markdown): A complete file selection flow with constraints, progress, and error feedback. - [OTP input](https://uiarc.dev/components/blocks/otp-input/markdown): A six digit verification flow with paste support and keyboard navigation. - [Multi-step form](https://uiarc.dev/components/blocks/multi-step-form/markdown) (Pro): A guided form that presents one decision at a time and preserves progress. - [Team showcase](https://uiarc.dev/components/blocks/team-showcase/markdown) (Pro): An image led team introduction with profiles that open in place. - [Studio perspectives](https://uiarc.dev/components/blocks/testimonial-stage/markdown) (Pro): Portrait led editorial stories with a focused reading state. - [Changelog feed](https://uiarc.dev/components/blocks/changelog-feed/markdown): Release notes you can filter, open in place, and scroll through month by month. - [Usage pricing](https://uiarc.dev/components/blocks/usage-pricing/markdown) (Pro): A pricing calculator that finds your plan as you drag seats and traffic. - [AI composer](https://uiarc.dev/components/blocks/ai-composer/markdown) (Pro): A focused assistant thread where messages lift out of the composer and replies stream in. - [Sign in](https://uiarc.dev/components/blocks/sign-in/markdown): A sign in card that morphs from email to a six digit code to your account. - [Workspace sidebar](https://uiarc.dev/components/blocks/workspace-sidebar/markdown) (Pro): A product sidebar with a workspace switcher, live search, draggable favorites, and inline projects. - [Settings page](https://uiarc.dev/components/blocks/settings-page/markdown) (Pro): Account settings with a gliding section nav and a save bar that morphs in as you edit. - [Sidebar rail](https://uiarc.dev/components/blocks/sidebar-rail/markdown) (Pro): An app shell whose sidebar folds into an icon rail and slides in as a sheet on phones. - [Docs sidebar](https://uiarc.dev/components/blocks/docs-sidebar/markdown) (Pro): A docs layout with a live filtering nav tree, version switcher, and a gliding on this page outline. - [Integrations](https://uiarc.dev/components/blocks/integrations/markdown) (Pro): An integrations directory where Connect morphs to Connected and the filters recount as you go. - [Billing overview](https://uiarc.dev/components/blocks/billing-overview/markdown) (Pro): A billing page where the plan card morphs into a picker and usage, invoices, and card follow. - [API keys](https://uiarc.dev/components/blocks/api-keys/markdown) (Pro): API key management where Create key unfolds into its form and each secret is shown once. - [Inbox sidebar](https://uiarc.dev/components/blocks/inbox-sidebar/markdown) (Pro): A mail sidebar whose Compose button grows into a composer and whose folders take dropped mail. - [Team members](https://uiarc.dev/components/blocks/team-members/markdown) (Pro): A members list where typed emails turn into chips and fly into pending invites as seats roll. - [Page header](https://uiarc.dev/components/blocks/page-header/markdown): A project page header that folds into a compact bar as you scroll, with tabs whose counts roll. - [Revenue explorer](https://uiarc.dev/components/blocks/revenue-explorer/markdown) (Pro): A SaaS revenue chart you zoom with a brush while paths, axes and figures glide to the range. - [Journey flow](https://uiarc.dev/components/blocks/journey-flow/markdown) (Pro): A Sankey of user journeys whose flows morph by channel and trace a cohort on hover. - [Empty states](https://uiarc.dev/components/blocks/empty-states/markdown): Four empty states in one illustration whose shapes morph between scenes as you switch tabs. - [Centered login](https://uiarc.dev/components/blocks/login-centered/markdown): A passkey-first login card on a quiet ring backdrop that morphs through email and code. - [Immersive login](https://uiarc.dev/components/blocks/login-immersive/markdown) (Pro): A glass magic link card over dusk photography that folds its envelope shut once sent. - [Security settings](https://uiarc.dev/components/blocks/security-settings/markdown) (Pro): An account security page with guided two-factor setup, password change and active sessions. - [Login split](https://uiarc.dev/components/blocks/login-split/markdown) (Pro): A full screen split login: an email-first form that morphs into a password step beside a photo. - [Cohort retention](https://uiarc.dev/components/blocks/cohort-retention/markdown) (Pro): A cohort retention triangle that morphs into retention curves and rewashes by segment. - [Support widget](https://uiarc.dev/components/blocks/support-widget/markdown) (Pro): An in-app help launcher that grows into live article search, reading, and a chat with your team. - [Usage forecast](https://uiarc.dev/components/blocks/usage-forecast/markdown) (Pro): A billing period usage chart with a forecast cone and a draggable budget that dates the crossing. - [MRR waterfall](https://uiarc.dev/components/blocks/mrr-waterfall/markdown) (Pro): An MRR bridge whose floating bars morph by period and open the accounts behind each move. - [Webhooks](https://uiarc.dev/components/blocks/webhooks/markdown) (Pro): A webhooks console with delivery history, a payload inspector and retries that roll the rate. - [Roles and permissions](https://uiarc.dev/components/blocks/roles-permissions/markdown) (Pro): A permissions matrix with group toggles that ripple, role duplication and a review bar. - [Metric explorer](https://uiarc.dev/components/blocks/metric-explorer/markdown) (Pro): KPI cards that open into a scrubbable chart and morph between metrics and ranges. - [Revenue globe](https://uiarc.dev/components/blocks/revenue-globe/markdown) (Pro): A dotted globe where live payments arc home to headquarters, with a replayable day. - [Customer galaxy](https://uiarc.dev/components/blocks/customer-galaxy/markdown) (Pro): 2,400 accounts as a drifting galaxy that spirals into clusters by plan, region or health. - [Semantic zoom](https://uiarc.dev/components/blocks/semantic-zoom/markdown) (Pro): An infinite-zoom map of a company that reveals teams, projects, tasks and people as you fly in. - [Layout morph](https://uiarc.dev/components/blocks/layout-morph/markdown) (Pro): A 24 card gallery that flies between grid, masonry, list, fan, carousel and a 3D helix. - [Agent run](https://uiarc.dev/components/blocks/agent-run/markdown) (Pro): A live AI agent run: steps stream in, tool calls expand, a diff waits for approval, and it all folds into a result. - [Week calendar](https://uiarc.dev/components/blocks/week-calendar/markdown) (Pro): A week calendar where you drag to create, move, and resize events, with color coded calendars, day and agenda views, and swipes on phones. - [Scroll story](https://uiarc.dev/components/blocks/scroll-story/markdown) (Pro): A feature section where scrolling the copy drives a pinned product view through each step. - [Spotlight grid](https://uiarc.dev/components/blocks/spotlight-grid/markdown) (Pro): A feature grid where light follows the pointer, cards play live demos, and a click morphs a card into its detail. - [Invite people](https://uiarc.dev/components/blocks/invite-people/markdown) (Pro): Invite teammates with roles, bulk paste validation, a seat meter, and avatars that fly into a pending list. - [Cart drawer](https://uiarc.dev/components/blocks/cart-drawer/markdown) (Pro): Products fly into the cart, counts roll, and a drawer handles quantities, shipping progress, and checkout. - [Pricing calculator](https://uiarc.dev/components/blocks/pricing-calculator/markdown) (Pro): A seat slider and billing toggle drive plan cards with rolling prices and a moving recommended badge. - [AI chat](https://uiarc.dev/components/blocks/ai-chat/markdown) (Pro): A complete AI chat with streamed markdown answers, folding reasoning, tool chips, citations, and a model switcher. - [Checkout summary](https://uiarc.dev/components/blocks/checkout-summary/markdown) (Pro): An order summary with a promo code that becomes a chip, discount and tax lines, and pay button states. - [Site header](https://uiarc.dev/components/blocks/site-header/markdown): A sticky website header that turns solid on scroll, with a gliding active link, mega menu panels, and a mobile sheet. - [Site footer](https://uiarc.dev/components/blocks/site-footer/markdown): A website footer with link columns and newsletter, a minimal layout, and a large fading Arc mark. - [Hero section](https://uiarc.dev/components/blocks/hero-section/markdown): 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 editorial type over a mesh gradient. - [FAQ section](https://uiarc.dev/components/blocks/faq-section/markdown): FAQs as an accordion, a topic rail, or a searchable list that highlights matches. - [Contact section](https://uiarc.dev/components/blocks/contact-section/markdown): A validated contact form that morphs into a confirmation, support channels, and office cards with local times. - [Usage billing](https://uiarc.dev/components/blocks/usage-billing/markdown) (Pro): A usage based billing dashboard with a projected spend line, meters against limits, alerts, and an upgrade that morphs into a confirm sheet. - [KPI drilldown](https://uiarc.dev/components/blocks/kpi-drilldown/markdown) (Pro): KPI cards that expand into a full detail chart with period comparison and a breakdown table, then fold back. - [Blog grid](https://uiarc.dev/components/blocks/blog-grid/markdown): A blog index with a featured post, category filter, post cards, pagination and an in-place reader. - [Comparison table](https://uiarc.dev/components/blocks/comparison-table/markdown): An us versus them table with a sticky header, a highlighted column, and a stacked phone view. - [Feature bento](https://uiarc.dev/components/blocks/feature-bento/markdown) (Pro): A six cell feature bento where small, real product UI acts each feature out on hover. - [Stats band](https://uiarc.dev/components/blocks/stats-band/markdown): 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. - [CTA section](https://uiarc.dev/components/blocks/cta-section/markdown): A call to action as a centered closing section, a split beside a setup card that completes itself, or a dismissible banner. - [Newsletter signup](https://uiarc.dev/components/blocks/newsletter-signup/markdown): An email signup framed by a stack of past issues; subscribing drops the next issue, addressed to you, onto the front. - [Product listing](https://uiarc.dev/components/blocks/product-listing/markdown) (Pro): A storefront grid with price, color and size filters, a sort menu, hover photo swaps, and quick add with a size row. - [Product detail](https://uiarc.dev/components/blocks/product-detail/markdown) (Pro): A product page with a swipeable gallery, finish and size variants, add to bag that confirms in place, shipping, a reviews summary, and details. - [Hero signup](https://uiarc.dev/components/blocks/hero-signup/markdown) (Pro): A full screen waitlist hero on a soft, drifting mesh gradient: the email field validates as you type and its button grows into the confirmation with your place in line. - [Market terminal](https://uiarc.dev/components/blocks/market-terminal/markdown) (Pro): A trading terminal with a canvas candlestick chart, volume, moving averages, crosshair OHLC readout, wheel, drag and pinch zoom, a live watchlist with sparklines and flashing prices, and a market and limit order ticket. - [Budget variance](https://uiarc.dev/components/blocks/budget-variance/markdown) (Pro): Budget against actual operating spend by department as aligned bullet charts, with favorable and unfavorable variance, a month, quarter and year to date switch that springs every bar, in-place drill-down into budget lines, and a total row. - [Small multiples](https://uiarc.dev/components/blocks/small-multiples/markdown) (Pro): A trellis of small line charts that reads as one chart, with a synced crosshair, a shared or independent y scale that springs the axes, sorting with a FLIP reorder, a ghost of the overall total behind every panel and dimming for flat trends. - [Connected scatter](https://uiarc.dev/components/blocks/connected-scatter/markdown) (Pro): A connected scatterplot of monthly CAC against LTV where the path draws itself in, a scrubber moves a head along the curve, and a channel switch morphs the path against a shaded 3x target line. - [Line replay](https://uiarc.dev/components/blocks/line-replay/markdown) (Pro): A time replay line chart that draws a day of traffic with a moving playhead, a value label on the tip, a scrubber, speed control and key moments annotated as the playhead passes them. ## Optional - [Installation guide](https://uiarc.dev/docs/installation): Manual setup without the CLI - [Pricing](https://uiarc.dev/pricing): Pro components, blocks, and licensing