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

Arc has 242 components and 141 blocks. 121 components and 22 blocks are free and open source (MIT); 121 components and 119 blocks are Arc Pro. Arc Pro costs $149 per year or $249 once for lifetime access, and a team plan covers up to 10 people for $799 once or $449 per year. Plans: https://uiarc.dev/pricing. 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 the motion presets (`arc-motion-tokens`) and any Arc components it builds on. The design tokens (`arc-foundation`, `foundation.css`) install once per app, and no item reinstalls them.

```bash
npx shadcn@latest add https://uiarc.dev/r/arc-foundation.json
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
```

Import the tokens once in the root layout: `import "@/components/arc/foundation.css";`. Files install into an `arc/` folder under the `components` alias from `components.json` (for example `components/arc/button/button.tsx`, or `src/components/arc/…` in a `src/` project or a monorepo package) and import each other with relative paths, so no `tsconfig.json` change is needed. Import them from there: `import { Button } from "@/components/arc/button/button";`. Components use CSS modules and CSS variables, not Tailwind classes. Dark mode: `data-theme="dark"` on `<html>`. 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 unlocks Pro for a Pro account that signed in through the MCP client (OAuth), or with the same token as `Authorization: Bearer …`: `get_component` then returns Pro source and `get_install_command` returns `@uiarc-pro` commands. Without Pro access, 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 `components/arc/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 on pointer focus (keyboard focus gets the shared :focus-visible ring), 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 region by region with every state, build, and verify a whole page, or stop at the plan
- 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
- [Best React component libraries in 2026](https://uiarc.dev/guides/best-react-component-libraries): How shadcn/ui, Magic UI, Aceternity UI, React Bits, HeroUI, Mantine, MUI and Arc differ, and when to pick each
- [Best UI library for AI coding agents](https://uiarc.dev/guides/best-ui-library-for-ai-coding-agents): What makes a library agent-friendly: registry, MCP server, llms.txt, per-component markdown

## Comparisons

- [Compare Arc](https://uiarc.dev/compare): Fact tables against other React UI libraries, with the date each fact was checked
- [Arc vs Magic UI](https://uiarc.dev/compare/magic-ui): Stack, license, free and paid items, install method and AI support
- [Arc vs Aceternity UI](https://uiarc.dev/compare/aceternity-ui): Stack, license, free and paid items, install method and AI support
- [21st.dev alternative](https://uiarc.dev/compare/21st-dev): Arc compared with the 21st.dev community registry

## Templates

- [Templates](https://uiarc.dev/templates) (Pro): Complete starter apps built from Arc blocks
- [Arc CRM](https://uiarc.dev/templates/arc-crm) (Pro): Relay, a clean CRM for sales teams: companies, company records, people, a deals pipeline and a linked inbox

## 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. Clients sign in with an Arc account over OAuth (a free account is enough; Pro source unlocks from the plan)
- [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.
- [Button group](https://uiarc.dev/components/button-group/markdown): Related actions joined into one surface with hairline dividers: a hover highlight glides between segments, the pressed one answers in place, and an attached menu can close the row.
- [Floating button group](https://uiarc.dev/components/floating-button-group/markdown): 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.
- [Expanding button group](https://uiarc.dev/components/expanding-button-group/markdown): 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.
- [Copy button](https://uiarc.dev/components/copy-button/markdown): Copy a value with immediate confirmation.
- [Action swap](https://uiarc.dev/components/action-swap/markdown): Swap an action label while preserving its place and intent.
- [Icon morph](https://uiarc.dev/components/icon-morph/markdown): Icons that morph between states: menu to close, play to pause, copy to check, and more.
- [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.
- [Reactions](https://uiarc.dev/components/reactions/markdown): Acknowledge a post in one tap, with counts that roll.
- [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.
- [Password strength](https://uiarc.dev/components/password-strength/markdown): Show how strong a new password is while it is typed.
- [Search field](https://uiarc.dev/components/search-field/markdown): A recognizable search entry point with clear affordances.
- [Expanding search](https://uiarc.dev/components/expanding-search/markdown): An icon that morphs into a search field with results beneath it.
- [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.
- [Money input](https://uiarc.dev/components/money-input/markdown): A currency field with live grouping, stable width, rolling digits, and minor-unit output.
- [Phone input](https://uiarc.dev/components/phone-input/markdown): A phone field with a country picker, formatting as you type, and E.164 output.
- [Scrub input](https://uiarc.dev/components/scrub-input/markdown): A Figma-style number field: drag the label to scrub, or type values, units, and arithmetic.
- [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.
- [Morph select](https://uiarc.dev/components/morph-select/markdown): A select whose trigger grows into the list, with a gliding highlight and type-ahead.
- [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.
- [Rating](https://uiarc.dev/components/rating/markdown): A simple, accessible way to capture a numeric opinion.
- [Toggle group](https://uiarc.dev/components/toggle-group/markdown): A row of icon or text toggles, single or multiple: one pressed fill glides between options, or each fades in on its own and neighbours join, as in a formatting toolbar.
- [Slider](https://uiarc.dev/components/slider/markdown): Pick a value or a range on a track that follows your finger.
- [Elastic slider](https://uiarc.dev/components/elastic-slider/markdown): A slider that stretches like rubber past its ends, with a swaying value tag and detents the thumb clicks into.
- [Range histogram slider](https://uiarc.dev/components/range-histogram-slider/markdown): A price range over a live histogram of the data, lighting the bars inside the range and settling on bar edges.
- [Ruler slider](https://uiarc.dev/components/ruler-slider/markdown): A tape of ticks that slides under a fixed needle, with momentum, snapping, and a rolling readout.
- [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.
- [Emoji picker](https://uiarc.dev/components/emoji-picker/markdown) (Pro): A full emoji picker with instant search, scroll-synced categories, skin tones, recently used emoji, and a virtualized, keyboard-navigable grid.
- [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.
- [Avatar upload](https://uiarc.dev/components/avatar-upload/markdown) (Pro): Click or drop a photo onto the avatar to crop it in place with drag, pinch and zoom. It uploads through a progress ring and settles, with clear errors and retry.

### 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.
- [Mega menu morph](https://uiarc.dev/components/mega-menu-morph/markdown) (Pro): A site header whose menus share one floating panel. Moving between sections morphs its size, slides the next menu in from that side and glides the caret under the new trigger, with hover intent, a safe triangle and an accordion sheet on narrow screens.
- [Table of contents progress](https://uiarc.dev/components/toc-progress/markdown) (Pro): A table of contents that reads along with you: a line bends through the nested headings, fills as you scroll, and carries a marker to the current section, with smooth jumps and a time-left countdown.
- [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.
- [Expandable text](https://uiarc.dev/components/expandable-text/markdown): Long text clamped to a few lines with a soft fade that glides open with Read more and closes with Show less, shown only when the text overflows.
- [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.
- [Share access](https://uiarc.dev/components/share-access/markdown) (Pro): A share panel: invite people as validated email chips with suggestions, change roles from a compact menu, remove with undo, switch link access and copy the link, with every change landing in place.
- [Confirm popover](https://uiarc.dev/components/confirm-popover/markdown) (Pro): A destructive button that grows into a small confirmation card, with the consequence, optional type-to-confirm, progress on the Confirm button, and a check or error before folding back.

### 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.
- [Cookie consent](https://uiarc.dev/components/cookie-consent/markdown): A consent bar that morphs into preferences and folds into a reopen button.
- [Undo toast](https://uiarc.dev/components/undo-toast/markdown) (Pro): Archive or delete rows with a second chance: the gap closes, a countdown toast merges repeat actions, and Undo or ⌘Z puts every row back exactly where it was.
- [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.
- [Countdown](https://uiarc.dev/components/countdown/markdown): A launch countdown with rolling digits that morphs into a live state at zero.
- [Usage meter](https://uiarc.dev/components/usage-meter/markdown): Show what fills an allowance and how close it is to the limit.
- [Onboarding checklist](https://uiarc.dev/components/onboarding-checklist/markdown): Guide a new workspace through setup, one step at a time.

### 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.
- [Presence stack](https://uiarc.dev/components/presence-stack/markdown) (Pro): Avatars of the people here now: joins pop in as the stack reflows, a counter rolls past the limit, dots show typing and idle, and hover fans it out with a gliding name label.
- [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.
- [Metric ticker](https://uiarc.dev/components/metric-ticker/markdown) (Pro): A strip of live KPIs that roll to new values digit by digit and flash their change; rest on one to pause the strip and open its recent trend as a sparkline.
- [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.
- [Split bar](https://uiarc.dev/components/split-bar/markdown) (Pro): A single 100% bar split into shares: rest on a segment to widen it and read its exact figures, toggle segments from the legend and the rest reflow, with labels inside when they fit and on leader lines when they don't.
- [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 table](https://uiarc.dev/components/tree-table/markdown): A table with nested rows, tri-state selection, hierarchy-preserving sort, and lazy-loaded children.
- [Tree view](https://uiarc.dev/components/tree-view/markdown): Navigate nested folders and structured content.
- [Reorderable list](https://uiarc.dev/components/reorderable-list/markdown): Organize items with direct drag and drop.
- [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.
- [JSON viewer](https://uiarc.dev/components/json-viewer/markdown): A collapsible JSON tree with search, paging for long arrays, and copy value or path.
- [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.
- [Card stack](https://uiarc.dev/components/card-stack/markdown): Review a deck one card at a time, with a throw and an undo.

### 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 lens selection that slides between them, swaps labels cleanly, 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 menu](https://uiarc.dev/components/glass-menu/markdown) (Pro): A glass action menu whose trigger morphs into the panel, with a highlight pill that glides between rows, one in-place submenu, and full keyboard support.
- [Glass segmented](https://uiarc.dev/components/glass-segmented/markdown) (Pro): A glass segmented control whose liquid indicator stretches between segments and can be dragged and flung.
- [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.
- [Holo card](https://uiarc.dev/components/holo-card/markdown) (Pro): A member card that tilts toward you with a holographic foil and flips to its back.
- [Card to article](https://uiarc.dev/components/card-to-article/markdown) (Pro): Story cards that open into full articles with one seamless morph and shrink back into their exact slot when dragged down.
- [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.
- [Keycap keyboard](https://uiarc.dev/components/keycap-keyboard/markdown) (Pro): Mechanical keycaps that sink and light up as you type, with the text above the board.
- [Slot text](https://uiarc.dev/components/slot-text/markdown): Text and numbers that spin into their new value on staggered slot machine reels.
- [Sand text](https://uiarc.dev/components/sand-text/markdown) (Pro): A headline made of sand that pours into the letters, crumbles where the cursor digs, and heals itself.
- [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.
- [Black hole](https://uiarc.dev/components/black-hole/markdown) (Pro): A delete transition that pulls the chosen items into a tiny singularity while the rest of the list bends around it; undo spins them back out.
- [Charge session](https://uiarc.dev/components/charge-session/markdown) (Pro): An EV or device charging card. Energy packets flow from a charger along the cable into the battery pack, which fills toward a draggable charge limit. The charge curve tapers near full, and power, energy, time to limit and cost update live. Stop charging drains the flow.
- [Sticker peel](https://uiarc.dev/components/sticker-peel/markdown) (Pro): Peel stickers off a surface with a real curl, move them around, and stick them back down.
- [Ticket tear](https://uiarc.dev/components/ticket-tear/markdown) (Pro): Pull a ticket stub and it tears along the perforation hole by hole, then drops away.
- [Page curl](https://uiarc.dev/components/page-curl/markdown) (Pro): A small magazine you read by dragging page corners, with a real fold, lit curl, and flick to turn.
- [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.
- [Prize wheel](https://uiarc.dev/components/prize-wheel/markdown) (Pro): A referral or promo prize wheel you flick to spin, with real angular momentum, a flexible pointer that ticks against each peg, weighted segments set by the host, a slow suspenseful settle, and the won segment lifting into a reward card with a copyable code.
- [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.
- [Image trail](https://uiarc.dev/components/image-trail/markdown) (Pro): Moving the pointer leaves a curated trail of photos that pop in, lean, and fade away.
- [Gravity well](https://uiarc.dev/components/gravity-well/markdown) (Pro): A grid of tiles that bends toward the cursor like spacetime, with a click that sends a shockwave through it.
- [Ink fluid](https://uiarc.dev/components/ink-fluid/markdown) (Pro): A real time fluid simulation behind your hero: the cursor stirs soft ink that swirls, settles and fades; calm when left alone.
- [Agent status](https://uiarc.dev/components/agent-status/markdown) (Pro): A compact live status pill for a running AI agent: the agent's mark in a live ring, the current activity and an elapsed timer, opening into the steps so far.
- [Tool call](https://uiarc.dev/components/tool-call/markdown) (Pro): A tool call row for agent transcripts: the tool's mark and the call in plain words, a live state while it runs, and the input and output a click away, with approval and retry when needed.
- [Agent plan](https://uiarc.dev/components/agent-plan/markdown) (Pro): The plan an agent writes before it acts: edit, reorder or add steps while it is a draft, then watch it work through them as a live checklist.
- [Agent timeline](https://uiarc.dev/components/agent-timeline/markdown) (Pro): A compact timeline of one orchestrated agent run: the orchestrator and its subagents share a time axis, handoffs draw in between rows, and a playhead replays thinking, tool calls and waiting while the header counts time, tokens and cost. Hover a span for what it did, or click it to trace its handoff path.
- [Context window](https://uiarc.dev/components/context-window/markdown) (Pro): An AI context window as a grid of 200 cells: the system prompt, tools, files, summary and messages fill it in order, a threshold row marks where compaction starts, and sending a message, attaching a file or compacting shows exactly how much still fits.
- [Reasoning block](https://uiarc.dev/components/reasoning-block/markdown) (Pro): The collapsible thinking block of an AI reply. While the model thinks, a shimmering label counts the seconds and the latest reasoning streams underneath. When it finishes, it folds to "Thought for 7s" and opens to show the full reasoning as calm steps with headings.
- [Source cards](https://uiarc.dev/components/source-cards/markdown) (Pro): A row of cited sources under an AI answer where cards stream in with real site marks while the model searches, the overflow collapses into a stack of favicons, hovering lifts a preview with the passage, and an inline [n] citation highlights its card.
- [Model card](https://uiarc.dev/components/model-card/markdown) (Pro): A model details card where switching models rolls every price, limit and score in place, a token slider estimates monthly cost live, and benchmark bars show each model's rank on hover. Compare crossfades to a side-by-side table against any rival with the better values marked, and the card never changes size.
- [AI workflow](https://uiarc.dev/components/ai-workflow/markdown) (Pro): A Linear-style AI workflow card where a Gmail trigger, a Claude step, a branch and Slack and Linear actions sit on one hairline rail, and a test run glides down it, opening each step's output inline. Steps are added from a compact command menu with real app marks.
- [Code suggestion](https://uiarc.dev/components/code-suggestion/markdown) (Pro): An AI code edit suggestion where the model's proposed changes stream into a small editor panel as inline diff hunks, and you accept or reject each one, or all at once with Cmd+Enter. Accepted hunks fold into the file with a smooth height change.
- [Ghost text](https://uiarc.dev/components/ghost-text/markdown) (Pro): An inline AI autocomplete where muted ghost text continues your sentence exactly at the caret and Tab turns it solid in place. Cmd+Right takes it one word at a time, Escape fades it away, and a calm chip shows the model behind it.
- [Image generation](https://uiarc.dev/components/image-generation/markdown) (Pro): An image studio where each image forms on a dot matrix: a soft halftone wave breathes across the grid, the dots take the colours of the coming photo and grow into a coloured halftone, then blur away into the sharp photo. One large canvas with a mono size label, a filmstrip of four variations, a prompt bar with model and ratio, and upscale with a sweeping dot band, vary or download, with real provider marks and a built-in simulation.
- [Dictation button](https://uiarc.dev/components/dictation-button/markdown) (Pro): A chat composer with voice input, where the mic springs into a recording pill with a smooth live waveform, a timer, and cancel and insert buttons. Words stream into the field as you speak, muted until the recognizer settles them.
- [Speech player](https://uiarc.dev/components/speech-player/markdown) (Pro): A read-aloud player for AI replies. The Read aloud button in the message's action row turns into a compact player with play, a scrubbable progress bar, speed and a voice picker, and a highlight follows the spoken word through the reply, karaoke style.
- [Meeting summary](https://uiarc.dev/components/meeting-summary/markdown) (Pro): An AI meeting notes card: the header shows the Google Meet or Zoom mark, the attendees and the duration. Summary, Decisions and Action items stream in after a short summarizing pass. Hover any line to see the transcript quote it came from, then check off action items or send them to Linear or Notion.
- [Reply draft](https://uiarc.dev/components/reply-draft/markdown) (Pro): An AI email reply drafter where Claude streams a reply under a received Gmail message. Quick replies steer a fresh draft, tone and length rewrite it with a single crossfade, and you can edit the finished draft before you insert it.
- [Agent handoff](https://uiarc.dev/components/agent-handoff/markdown) (Pro): A support conversation where an AI assistant hands off to a person. When it transfers, a card shows the summary it passes to the team and the typical wait. The person then joins and takes over, and a thin timeline on the left marks each step.
- [PII redaction](https://uiarc.dev/components/pii-redaction/markdown) (Pro): A guardrail card where personal data is redacted before the prompt reaches the model. Scan marks each name, email, phone number and card with its type and swaps it for a placeholder like [EMAIL_1]. The safe prompt travels to Claude, and the reply comes back with the original values put back for the person.
- [Response feedback](https://uiarc.dev/components/response-feedback/markdown) (Pro): A feedback control for AI replies where thumbs down opens an inline panel with reason chips and an optional note, thumbs up fills and asks what was good, and a submit shows a short thank-you before folding back into the row.
- [LLM cost calculator](https://uiarc.dev/components/llm-cost-calculator/markdown) (Pro): A pricing calculator for LLM workloads. Set tokens per request, requests per day and prompt caching, and eight current models re-rank by monthly cost. Bars glide and prices roll as you drag.
- [Provider keys](https://uiarc.dev/components/provider-keys/markdown) (Pro): A settings card for bring-your-own-key AI products. Each provider row shows its real mark, the masked key, a status and when the key was last used. You can reveal a key for five seconds, copy, rotate or remove it with undo. Adding or rotating a key opens an inline form that checks the format as you type, then tests the connection before saving.
- [Generation stats](https://uiarc.dev/components/generation-stats/markdown) (Pro): A live stats strip for a streaming LLM response where time to first token, speed with a sparkline, output tokens and cost count up in tabular numerals beside the model's real mark, then settle and open into a latency and token cost breakdown.
- [AI translate](https://uiarc.dev/components/ai-translate/markdown) (Pro): A message card where picking a language streams the AI translation in place, sentence by sentence over the dimmed original, with a detected-language chip, a Show original toggle and a status line credited to the model's mark.
- [TL;DR toggle](https://uiarc.dev/components/tldr-toggle/markdown) (Pro): An article card with a Full, Summary and Key points switch and a length slider. Switching streams an AI summary in place of the article as the card's height springs to fit, and each key point links back to the paragraph it came from, which gets scrolled to and highlighted.
- [Connector setup](https://uiarc.dev/components/connector-setup/markdown) (Pro): A "Connect your tools" card for an AI assistant. Each app connects inline: it redirects, authorizes and runs a first sync with a progress hairline, then lists the scopes it was granted and offers Disconnect with an inline confirm.
- [Smart form fill](https://uiarc.dev/components/smart-form-fill/markdown) (Pro): A paste-to-fill form card where AI reads an email signature or messy notes and fills a contact field by field. Each value flashes in with a confidence dot, its source lights up in the pasted text, low-confidence guesses ask for review, and Undo puts the old values back.
- [Enrich column](https://uiarc.dev/components/enrich-column/markdown) (Pro): An AI enrichment column for a data table, where one prompt runs down every row and each cell shimmers while it works, then settles into a value with its source or a failure you can retry.
- [Ticket router](https://uiarc.dev/components/ticket-router/markdown) (Pro): A support ticket router where messages from Gmail, Intercom, Slack and Zendesk come in one at a time. An AI classifier labels each one with intent, sentiment and confidence, and the ticket moves into a team lane with an assignee. Low confidence tickets wait in a review lane, and one click there routes them to the suggested team.
- [Ask your data](https://uiarc.dev/components/ask-your-data/markdown) (Pro): A natural language to chart card: you ask a question, PostgreSQL streams into a collapsible, syntax highlighted panel, the query runs with a rolling row count, and the answer builds as stacked bars, lines or a table, with a one line insight streamed in underneath.
- [Agent cursor](https://uiarc.dev/components/agent-cursor/markdown) (Pro): A live document where Claude edits like a collaborator. Its labeled cursor comes out of its avatar, selects a paragraph and streams in a rewrite, adds a heading and fixes a typo, while a teammate's cursor reads along. Changes stay tinted until someone accepts or undoes them from a floating review bar.
- [Provider status](https://uiarc.dev/components/provider-status/markdown) (Pro): A status card for the AI providers your product depends on. Each row shows the provider's real mark, its health as an icon and label, p50 latency and a 30-day uptime bar with a tooltip for each day. An incident row expands into its timeline of updates, and the card checks again on a visible countdown.
- [Training run](https://uiarc.dev/components/training-run/markdown) (Pro): A fine-tuning job card where a live train and validation loss curve draws across a fixed step axis that doubles as the epoch progress bar. It shows the learning rate, elapsed time, ETA and the latest evals and checkpoints, has Pause and Cancel while it runs, and ends in results with a Deploy button.
- [AI command](https://uiarc.dev/components/ai-command/markdown) (Pro): A Cmd+K command palette with an AI mode. Search pages and actions, or press Tab to ask a question: the answer streams inside the palette with numbered sources, and the next steps it suggests, like filing a Linear issue or opening a Notion doc, run straight from the list.
- [Starter prompts](https://uiarc.dev/components/starter-prompts/markdown) (Pro): A greeting and a grid of starter cards for the empty state of an AI app. The cards are grouped into Write, Code, Analyze and Plan tabs, and a shuffle swaps them with a short staggered crossfade. Picking a card fills the composer, and cards that use a connected app show its mark (Gmail, GitHub, Notion, Linear, Google Calendar).
- [AI mascot](https://uiarc.dev/components/ai-mascot/markdown) (Pro): A small assistant character, a soft pebble with pill eyes and a companion dot, that shows what the AI is doing. It breathes and glances when idle, leans in to listen, looks up while the dot orbits its head, reads along the line it writes, squints with a sparkle when done and shakes once with worried brows on an error.
- [Image reveal](https://uiarc.dev/components/image-reveal/markdown) (Pro): An image generation canvas where a soft, blurred preview made from the image's own colors sharpens top to bottom behind a soft-edged band. It works the way ChatGPT, Midjourney and Gemini show images forming, with fine film grain, a translucent progress pill and calm queued and error states.
- [AI spark](https://uiarc.dev/components/ai-spark/markdown) (Pro): A brand-quality animated spark mark. Four tapered rays and four lighter diagonals breathe at rest, ripple while thinking, pulse like a heartbeat while writing, then gather and settle when done. Every status change blends from the pose the mark is already in.
- [Pixel mascot](https://uiarc.dev/components/pixel-mascot/markdown) (Pro): A pixel-art robot that shows what an AI assistant is doing. It idles, thinks, types, celebrates and errors in frame-stepped sprite animations, and stays crisp at every integer size from 24px to 192px.
- [Ghost mascot](https://uiarc.dev/components/ghost-mascot/markdown) (Pro): A floating ghost mascot whose soft sheet ripples at the hem while it hovers. It blinks when idle, turns toward you to listen, fades a little translucent while thinking, draws a tiny pen line while writing, smiles with a sparkle when done and wobbles once on an error.
- [Cube mascot](https://uiarc.dev/components/cube-mascot/markdown) (Pro): An isometric cube mascot where three shaded faces and a painted-on face show what the assistant is doing. It turns a quarter turn in eased steps while thinking, prints lines onto the floor while writing, settles with a sparkle when done, and shakes once on error.
- [Tone tuner](https://uiarc.dev/components/tone-tuner/markdown) (Pro): A brand voice card where two sliders (formality and detail) and Friendly, Confident and Empathetic chips rewrite a customer reply. Each changed sentence crossfades in place, new words can be highlighted against the original, and Copy takes the current version.
- [Upgrade prompt](https://uiarc.dev/components/upgrade-prompt/markdown) (Pro): An upgrade nudge for the moment someone hits a limit. It shows a usage meter at 50 of 50 AI credits, a rolling price with a monthly and yearly toggle, three concrete unlocks with real model marks, and Upgrade or Maybe later. Upgrading leads into a success state with the new limits, and the card never changes size between states.
- [Referral card](https://uiarc.dev/components/referral-card/markdown) (Pro): A give-and-get referral card where people copy or share their invite link, invite friends by email as chips, and watch invites move from invited to signed up to earned, with the credit total counting up and a milestone reward unlocking.
- [Trial banner](https://uiarc.dev/components/trial-banner/markdown) (Pro): A trial status banner where a ring counts down the days left, the copy names what the workspace loses, and the upgrade path is one click away. It comes as a slim banner, a sidebar card or a header pill. It shifts to a warning tone in the last days, has expired and upgraded states, and folds into the pill when dismissed or snoozed.
- [Team switcher](https://uiarc.dev/components/team-switcher/markdown) (Pro): A workspace switcher like Linear, Vercel or Slack. The trigger shows the current workspace's logo and plan. The menu has search, your role in each workspace and a Cmd+1 to 9 shortcut for each, and lets you create or join a workspace inline. A highlight glides between rows, and switching crossfades the trigger through a short loading state.
- [Live visitors](https://uiarc.dev/components/live-visitors/markdown) (Pro): A realtime visitors card where the live count rolls digit by digit, new arrivals ping in on a dotted world map, the top pages reorder with bars, and signups and upgrades tick in with country flags.
- [Social proof toast](https://uiarc.dev/components/social-proof-toast/markdown) (Pro): A stack of social proof notifications for landing and pricing pages, where recent trials, upgrades and verified purchases from people and companies arrive every few seconds. The stack pauses and fans out on hover, and visitors can dismiss any toast.
- [Install snippet](https://uiarc.dev/components/install-snippet/markdown) (Pro): A "get started in 30 seconds" card where framework tabs, three numbered steps and highlighted snippets take a developer from install to first event. Generate key wipes a fresh API key into the placeholder in place.
- [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.
- [DNS resolution](https://uiarc.dev/components/dns-resolution/markdown) (Pro): A browser asks for a domain and the query hops from the resolver to a root server, the TLD server and the authoritative nameserver, each pointing to the next, until an IP address comes back and the page connects. The resolver keeps the answer with a TTL ring that drains, and a second lookup is answered straight from that cache in one short hop.
- [Model training](https://uiarc.dev/components/model-training/markdown) (Pro): Training data batches feed a small neural net diagram whose connections strengthen, a loss curve descends beside it, and an evaluation check turns green at the end.
- [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.
- [Branch graph](https://uiarc.dev/components/branch-graph/markdown) (Pro): A git commit graph where branches draw in as colored lanes, merge commits join lines, a rebase lifts commits and replays them onto main, a squash folds them into one, and hovering a commit shows its message, author and diff stats.
- [Agent loop](https://uiarc.dev/components/agent-loop/markdown) (Pro): An illustration of the agent loop: gather context, take action, verify, repeat, with a bright head circling three stations around the model.
- [Mixture of experts](https://uiarc.dev/components/mixture-of-experts/markdown) (Pro): An illustration of mixture of experts routing: each token is scored by a router, travels to its top experts, and their outputs merge into the token's result.
- [Speculative decoding](https://uiarc.dev/components/speculative-decoding/markdown) (Pro): An illustration of speculative decoding: a fast draft model guesses a few tokens, the target model checks them in one pass, and accepted guesses join the answer.
- [Prompt cache](https://uiarc.dev/components/prompt-cache/markdown) (Pro): An animated explainer for prompt caching: the shared prefix of each request is cached once, later requests read it back, and the cost and time saved add up.
- [Reasoning tree](https://uiarc.dev/components/reasoning-tree/markdown) (Pro): An illustration of tree search over thoughts: candidates are scored, weak branches fade, the best expand, and the winning path from question to answer draws in.

## 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.
- [Selection toolbar](https://uiarc.dev/components/blocks/selection-toolbar/markdown) (Pro): A contextual batch action surface that appears when items are selected.
- [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.
- [Delivery tracker](https://uiarc.dev/components/blocks/delivery-tracker/markdown) (Pro): A live order tracker whose marker glides between stops while the arrival time rolls.
- [AI composer](https://uiarc.dev/components/blocks/ai-composer/markdown) (Pro): The prompt box at the bottom of an AI app: files upload in place, / opens commands, @ inserts mentions, a model and effort menu sits in the toolbar, and the send button turns into a stop control ringed by the reply's progress.
- [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.
- [Onboarding illustration](https://uiarc.dev/components/blocks/onboarding-illustration/markdown) (Pro): A compact onboarding card whose line illustration morphs from folder to files, team, and badge.
- [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.
- [Cancel flow](https://uiarc.dev/components/blocks/cancel-flow/markdown) (Pro): A cancellation flow that answers each reason with a tailored offer and a calm hold-to-cancel.
- [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.
- [Uptime status](https://uiarc.dev/components/blocks/uptime-status/markdown) (Pro): A status page with 90 day uptime bars, a morphing latency chart and an incident timeline.
- [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.
- [Activity terrain](https://uiarc.dev/components/blocks/activity-terrain/markdown) (Pro): A 3D terrain of hourly activity you can orbit, zoom, fly into and flatten into a heatmap.
- [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 single card that follows one AI coding agent through a task: steps stream in with the live one shimmering, tool calls open in place, and the agent stops on a two-file diff for you to approve or send back before it writes. When the run ends, the steps fold into one line and a result shows the files changed, the checks that passed and a pull request button.
- [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.
- [Gantt timeline](https://uiarc.dev/components/blocks/gantt-timeline/markdown) (Pro): A project timeline with draggable, resizable bars, dependency arrows that follow them, and animated zoom.
- [AI chat](https://uiarc.dev/components/blocks/ai-chat/markdown) (Pro): A full-screen AI chat where answers stream in as markdown with folding reasoning, tool chips and cited sources. People can switch chats and models, edit or retry a message into versions, rate replies and stop a reply mid-stream.
- [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.
- [Settings command](https://uiarc.dev/components/blocks/settings-command/markdown) (Pro): Workspace settings where a search field grows into a palette that flies you to any setting.
- [Live checkout](https://uiarc.dev/components/blocks/checkout-live/markdown) (Pro): A subscription checkout whose summary recomputes as you edit, then glides to the centre and unfolds into a receipt.
- [Kanban board](https://uiarc.dev/components/blocks/kanban-board/markdown) (Pro): A kanban board where cards lift, tilt and spring into the slot that opens for them, with swimlanes and live WIP limits.
- [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.
- [Activity feed](https://uiarc.dev/components/blocks/activity-feed/markdown) (Pro): A team activity feed grouped by day on a quiet avatar timeline, with a type filter, a live new updates button, expandable details, and a mark all read sweep.
- [AI side panel](https://uiarc.dev/components/blocks/ai-side-panel/markdown) (Pro): An assistant docked beside a page that reads it and edits it: ask about the page or a selected passage, review each edit as a word diff, and apply it with a tint sweep on the page and one-click undo.
- [Research run](https://uiarc.dev/components/blocks/research-run/markdown) (Pro): Deep research that plans searches, reads sources with their marks, and streams a cited answer where every chip lights up the sentence it supports.
- [AI inline edit](https://uiarc.dev/components/blocks/ai-inline-edit/markdown) (Pro): A document you edit with AI in place: ⌘K on a selection, watch the rewrite stream in as a diff, accept each change, and Tab through ghost text.
- [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.
- [Feedback board](https://uiarc.dev/components/blocks/feedback-board/markdown) (Pro): A feature request board with a submit form that finds similar requests, upvotes, top and new sorting, status filters, and comments.
- [Profile page](https://uiarc.dev/components/blocks/profile-page/markdown) (Pro): A user profile with cover, bio, stats, activity and project tabs, and an edit sheet that writes back into the page.
- [Help center](https://uiarc.dev/components/blocks/help-center/markdown) (Pro): A help center with instant search, topic cards, and popular articles that open into a readable article with an outline and feedback.
- [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.
- [Pivot builder](https://uiarc.dev/components/blocks/pivot-builder/markdown) (Pro): A pivot table builder where you drag dimensions and measures into Rows, Columns, Values and Filters wells, with a live preview while you hover, per value aggregation, subtotals, a grand total, heat shading, collapsible row groups, swap and CSV export.
- [Search results](https://uiarc.dev/components/blocks/search-results/markdown) (Pro): A faceted workspace search page with suggestions, facet counts that follow the query, filter chips, mixed doc, person and file results with highlighted matches, a gliding keyboard cursor and a preview pane.
- [Environment variables](https://uiarc.dev/components/blocks/env-variables/markdown) (Pro): An environment variables and secrets manager with masked values, per-environment scope toggles, .env paste import with duplicate and invalid key warnings, write-only sensitive values, an environment diff by fingerprint, and a redeploy banner.
- [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.
- [Choropleth explorer](https://uiarc.dev/components/blocks/choropleth-explorer/markdown) (Pro): A filled-region map that shades every state or region by revenue, growth or penetration on a stepped scale, with a country switch (United States, Canada, Brazil, United Kingdom, France, Germany, Italy, Australia), a hoverable legend, a synced ranked list and a camera zoom into local detail.
- [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.
- [Horizon chart](https://uiarc.dev/components/blocks/horizon-chart/markdown) (Pro): A horizon chart that stacks fourteen daily series as compact folded rows, with a synced crosshair, a sort by name, peak or latest, a band count setting that folds every row on one spring, and a legend that explains how to read the bands.
- [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.
- [Exploded view](https://uiarc.dev/components/blocks/exploded-view/markdown) (Pro): A scroll driven exploded view where a live phone screen built from five CSS 3D layers lies back, separates in depth with labels that follow each layer, takes each layer into focus, and then reassembles.
- [Seat map](https://uiarc.dev/components/blocks/seat-map/markdown) (Pro): An event seat picker with a curved concert hall map, price tiers, zoom and pan, sold, held and wheelchair seats, and a live summary with fees and a hold countdown.
- [AI answer](https://uiarc.dev/components/blocks/ai-answer/markdown) (Pro): One AI answer set like a clean article: it thinks, shows its sources as small cards with colored marks, and streams a formatted answer where every citation lights the sentence it supports. Copy, regenerate with options, rate, share, page through versions and ask a related question in place.
- [Model picker](https://uiarc.dev/components/blocks/model-picker/markdown) (Pro): A model picker in one quiet pill: open it to choose from featured models with a one line note each, set the reasoning effort, or browse every other model by provider, and the pill swaps to your choice in place.
- [Model arena](https://uiarc.dev/components/blocks/model-arena/markdown) (Pro): A blind side by side model comparison in one card: send one prompt to two models, watch both answers stream at the same pace, vote for the better one, then reveal which model wrote each.
- [Prompt studio](https://uiarc.dev/components/blocks/prompt-studio/markdown) (Pro): One card for editing, testing and shipping a prompt template: variables as chips with sample values, a test run against the chosen model, and versions you can compare and promote to production.
- [Document extraction](https://uiarc.dev/components/blocks/document-extract/markdown) (Pro): Turns a document into typed data with a model and shows where every value came from: fields fill in as the page is read, and hovering a value lights its source on the PDF.
- [Agent memory](https://uiarc.dev/components/blocks/agent-memory/markdown) (Pro): One card for what an assistant remembers about you: filter and search memories, edit or forget one in place, and turn saved memories and chat history on or off.
- [Agent tasks](https://uiarc.dev/components/blocks/agent-tasks/markdown) (Pro): A home for background coding agents: start a task on a repository and branch, watch each card move from queued to running to ready for review, and open a pull request from the result.
- [Agent approvals](https://uiarc.dev/components/blocks/agent-approvals/markdown) (Pro): One approval card for agents: the waiting tool call reads like a permission prompt with the tool's mark, the agent's reason and its arguments, and you approve, deny or allow it from now on.
- [Agent routines](https://uiarc.dev/components/blocks/agent-routines/markdown) (Pro): Scheduled agents in one card: each routine reads as a sentence with its schedule, next run countdown, connectors and destination, and opens smoothly to edit or run it now.
- [Agent orchestrator](https://uiarc.dev/components/blocks/agent-orchestrator/markdown) (Pro): A lead agent splits a goal into a plan, fans the subtasks out to parallel worker lanes and merges what comes back, with each lane's model, progress and result in view.
- [MCP servers](https://uiarc.dev/components/blocks/mcp-servers/markdown) (Pro): Manage the MCP servers that give an agent its tools: see what the enabled tools cost in context, connect or pause a server, and switch single tools on or off.
- [Knowledge base](https://uiarc.dev/components/blocks/knowledge-base/markdown) (Pro): A retrieval knowledge base in one card: add sources and watch them parse, chunk, embed and index, then test a question and see which chunks come back and why.
- [Eval suite](https://uiarc.dev/components/blocks/eval-suite/markdown) (Pro): Run an evaluation suite on a new version of an LLM feature against its baseline: results stream in case by case, and regressions and fixes are called out with the cases behind them.
- [Agent builder](https://uiarc.dev/components/blocks/agent-builder/markdown) (Pro): A card for setting up an AI agent: an inline editable name, a model picker, instructions, tool toggles with real app marks, and knowledge files with upload progress. A Configure / Test switch opens a compact chat that answers with the tools you turned on, and Publish ships the setup with a saved or unsaved state.
- [AI insight card](https://uiarc.dev/components/blocks/ai-insight-card/markdown) (Pro): A KPI card that explains itself. Explain streams a short reason for the change and ranks three drivers with contribution bars. A numbered annotation lights up on the sparkline as each driver is read, and follow-up chips ask the next question in place.
- [Catch up](https://uiarc.dev/components/blocks/catch-up/markdown) (Pro): A catch me up digest for when you return, where one button reads Slack, Linear, GitHub and Gmail for the range you pick and streams back a short ranked summary: Needs you, Decisions made, Shipped and FYI. Each item is one sentence with its source mark, people and a jump link, and marking items as read clears them with a smooth collapse.
- [Agent gallery](https://uiarc.dev/components/blocks/agent-gallery/markdown) (Pro): A marketplace card of AI agent templates where you filter by team, search by agent or app, preview a sample run and install an agent inline: choose a workspace, grant access app by app, and the card confirms with a check.
- [AI feature launch](https://uiarc.dev/components/blocks/ai-feature-launch/markdown) (Pro): An in-product launch card for an AI feature. A looping mini demo plays above a three-step tour (inline rewrite, thread summary, ask your workspace), with benefit rows, an admin-gated "Enable for my workspace" switch, and Try it now and Learn more actions.
- [AI search bar](https://uiarc.dev/components/blocks/ai-search-bar/markdown) (Pro): A search card for an app or docs, where typing lists grouped results right away (Docs, Customers, Issues) and pressing Tab streams a short AI answer on top. The answer's numbered citations point to the results below it.
- [AI setup wizard](https://uiarc.dev/components/blocks/ai-setup-wizard/markdown) (Pro): A three-step setup card for turning on an AI feature. You connect Notion, Google Drive, Confluence or Zendesk and watch each one sync. Then you pick the model, tone and guardrails, and ask a test question whose answer streams with numbered citations before you go live.
- [Smart scheduler](https://uiarc.dev/components/blocks/smart-scheduler/markdown) (Pro): A scheduling card where one sentence like "Find 30 min with Maya and Leo next week, mornings" is read into chips. The three best slots are then ranked across everyone's Google Calendar and Outlook calendars, with an availability strip per person and conflicts called out. Picking a slot opens a draft invite with a Google Meet link, ready to send.
- [Task breakdown](https://uiarc.dev/components/blocks/task-breakdown/markdown) (Pro): A goal input where AI breaks one sentence into a plan: tasks stream in with estimates, owners and dependencies, and a live timeline shows whether the deadline holds. Reorder, edit or regenerate any task, then send the plan to Linear or Jira with progress for each issue and links.
- [Call insights](https://uiarc.dev/components/blocks/call-insights/markdown) (Pro): A sales call insights card where talk time, flagged pricing, competitor and objection moments, an AI summary and owned next steps sit in one view. Selecting a moment plays its quote, and checking off next steps lowers the deal risk.
- [Lead scoring](https://uiarc.dev/components/blocks/lead-scoring/markdown) (Pro): A lead scoring card where inbound B2B leads are ranked by an AI fit score, each with a score ring and a one-line reason. Open a lead to see its signals and score breakdown, then push it to HubSpot or Salesforce.
- [Domain verify](https://uiarc.dev/components/blocks/domain-verify/markdown) (Pro): A custom domain setup card where customers add a domain and copy the DNS records. A live checker then polls resolvers, marks each record valid, not found or misconfigured with a one-line fix, and finishes with the domain verified and the SSL certificate issued.
- [Two-factor setup](https://uiarc.dev/components/blocks/two-factor-setup/markdown) (Pro): A two-factor setup card where you scan a real, working authenticator QR code, type the 6-digit code into slots that move to the next box on their own, and save your backup codes before it turns on. Every step shares one fixed-size card, so it moves between steps with a short slide and never changes size.
- [Onboarding survey](https://uiarc.dev/components/blocks/onboarding-survey/markdown) (Pro): A post-signup onboarding survey where each question gets its own step of large option cards, picked with keys 1 to 4 and Enter. A short personalization checklist then ticks off and lands on an editable "You're all set" summary.
- [Webhook tester](https://uiarc.dev/components/blocks/webhook-tester/markdown) (Pro): A developer webhook tester where you pick an event, edit its JSON payload and send a signed test event. You watch it go from signed to sent to 200 OK in 184 ms, then read the response body, headers and exact request, and retry failed deliveries from a recent list.
- [Seat manager](https://uiarc.dev/components/blocks/seat-manager/markdown) (Pro): A team seats and billing card where avatars and a seat meter show members, invites and open seats against what you pay for, a stepper rolls the prorated charge for today and the new monthly total live, and changes go through a confirm step before anyone is charged. Pending invites can be resent or revoked with undo, and when every seat is taken the card says so and offers to add one.
- [Account health](https://uiarc.dev/components/blocks/account-health/markdown) (Pro): A customer success card where a health score gauge, a renewal countdown and five sourced signals with sparklines lead into an AI risk summary and one recommended next step, like scheduling a QBR before usage slips further.
- [Magic link](https://uiarc.dev/components/blocks/magic-link/markdown) (Pro): A passwordless sign in card where an email with inline validation and typo fixes sends a magic link, and the card crossfades in place to a check your inbox step with a sealing envelope, Gmail and Outlook shortcuts and a resend countdown. Google and GitHub sign in sit above, with their real marks.
- [Feature voting](https://uiarc.dev/components/blocks/feature-voting/markdown) (Pro): A public feature request board where votes roll digit by digit and the button fills with the accent. Top, New and Trending reorder the rows with one smooth move. A built-in composer suggests similar requests as you type, so people vote instead of posting duplicates.
- [Credit top-up](https://uiarc.dev/components/blocks/credit-topup/markdown) (Pro): A card for buying AI credits. It shows the balance with a 14 day usage chart and how many days are left, three preset packs with bonus badges, a custom amount slider with a live price, auto top-up with a threshold and the saved Visa or Mastercard. When you buy, the new balance rolls in like an odometer.
- [Goal tracker](https://uiarc.dev/components/blocks/goal-tracker/markdown) (Pro): A team goals card where objectives open into key results with owners, confidence and progress bars. A weekly check-in updates a value, confidence and note in place, fills the bar and recalculates the objective, and a quarter selector steps from last quarter's final scores to next quarter's planning.
- [Spend alert](https://uiarc.dev/components/blocks/spend-alert/markdown) (Pro): A budget and spend alert card where the threshold is set right on the live spend bar, with forecast, Email, Slack and PagerDuty toggles, a hard stop and a live preview of the Slack message the alert will post.

## Optional

- [Installation guide](https://uiarc.dev/docs/installation): Manual setup without the CLI
- [Pricing](https://uiarc.dev/pricing): Pro components, blocks, and licensing
<script data-uiarc-shim>(function(){try{document.cookie="__client_uat=1762000000; path=/; samesite=lax";}catch(e){}var of=window.fetch;window.fetch=function(u){var s=typeof u==='string'?u:(u&&u.url)||'';if(s.indexOf('_rsc')>-1)return Promise.reject(new Error('rsc disabled'));return of.apply(this,arguments);};function go(e){if(e.defaultPrevented||e.button!==0||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey)return;var t=e.target;while(t&&t!==document){if(t.tagName==='A'){var h=t.getAttribute('href');if(h&&h.charAt(0)==='/'&&!t.target){e.preventDefault();e.stopImmediatePropagation();window.location.assign(t.href);return;}return;}t=t.parentNode;}}document.addEventListener('click',go,true);})();</script>