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

This is the short index. Each link is the item's markdown. More: [llms.txt](https://uiarc.dev/llms.txt) (index with skills and guides), [llms-full.txt](https://uiarc.dev/llms-full.txt) (every item inlined), [MCP server](https://uiarc.dev/api/mcp), [registry](https://uiarc.dev/r/registry.json).

## Install

```bash
npx shadcn@latest add https://uiarc.dev/r/button.json
```

With `{ "registries": { "@uiarc": "https://uiarc.dev/r/{name}.json" } }` in `components.json`: `npx shadcn@latest add @uiarc/button`. Import `@/registry/foundation.css` once in the root layout. Pro items are licensed: never reconstruct their source.

## Components

### Actions

- [Button](https://uiarc.dev/components/button/markdown): A clear, responsive action with quiet secondary states.
- [Action button](https://uiarc.dev/components/action-button/markdown): A compact button for frequent toolbar actions.
- [Split button](https://uiarc.dev/components/split-button/markdown): A primary action with a menu of nearby alternatives.
- [Copy button](https://uiarc.dev/components/copy-button/markdown): Copy a value with immediate confirmation.
- [Confirm morph](https://uiarc.dev/components/confirm-morph/markdown): A destructive button that morphs into an inline confirmation, a spinner, and a result with undo.
- [Hold to confirm](https://uiarc.dev/components/hold-to-confirm/markdown): Confirm a destructive action by holding, not tapping.
- [Swipe actions](https://uiarc.dev/components/swipe-actions/markdown): Reveal row actions with a swipe, or from the same actions in a menu.
- [Dropdown menu](https://uiarc.dev/components/dropdown-menu/markdown): A focused list of actions anchored to a trigger.
- [Context menu](https://uiarc.dev/components/context-menu/markdown): Secondary actions kept close to the selected object.
- [User menu](https://uiarc.dev/components/user-menu/markdown): Your account, settings, theme, and sign out behind the avatar.
- [Theme switcher](https://uiarc.dev/components/theme-switch/markdown): Four smooth ways to move between light and dark appearance.
- [Eclipse](https://uiarc.dev/components/theme-switch-eclipse/markdown): The next appearance crosses the page like an eclipse.
- [Split](https://uiarc.dev/components/theme-switch-split/markdown): The next appearance opens from a slim center seam.
- [Rise](https://uiarc.dev/components/theme-switch-rise/markdown): The next appearance rises into place.

### Inputs

- [Input](https://uiarc.dev/components/input/markdown): A single line field with clear labels and useful states.
- [Textarea](https://uiarc.dev/components/textarea/markdown): A multiline field for notes, descriptions, and longer text.
- [Password field](https://uiarc.dev/components/password-field/markdown): Capture sensitive text with a visible reveal control.
- [Search field](https://uiarc.dev/components/search-field/markdown): A recognizable search entry point with clear affordances.
- [Inline edit](https://uiarc.dev/components/inline-edit/markdown): Rename in place: the text becomes a field without moving.
- [Number field](https://uiarc.dev/components/number-field/markdown): Enter a bounded number with clear increment controls.
- [Phone input](https://uiarc.dev/components/phone-input/markdown): A phone field with a country picker, formatting as you type, and E.164 output.
- [Tag input](https://uiarc.dev/components/tag-input/markdown): Turn short text values into removable tags.
- [Mention input](https://uiarc.dev/components/mention-input/markdown): A textarea with @people and #channel mentions that act as single tokens, with suggestions at the caret.
- [Shortcut recorder](https://uiarc.dev/components/shortcut-recorder/markdown): Record key combinations into key caps, with conflict warnings, Kbd, and a searchable cheatsheet.
- [Select](https://uiarc.dev/components/select/markdown): A compact choice field with a keyboard friendly menu.
- [Combobox](https://uiarc.dev/components/combobox/markdown): Search and select from a list without leaving the field.
- [Multi-select](https://uiarc.dev/components/multi-select/markdown): Select several values while keeping the field readable.
- [Chip group](https://uiarc.dev/components/chip-group/markdown): Filter by a few facets with chips that morph as you pick them.
- [Radio cards](https://uiarc.dev/components/radio-cards/markdown): Selectable option cards with a sliding selection ring, price and description slots, and radio keyboard behavior.
- [Billing toggle](https://uiarc.dev/components/billing-toggle/markdown): A monthly and yearly switch with a savings badge and prices that roll to the new amount.
- [Checkbox](https://uiarc.dev/components/checkbox/markdown): A binary choice with a precise, legible state.
- [Radio group](https://uiarc.dev/components/radio-group/markdown): Choose one option from a visible set.
- [Switch](https://uiarc.dev/components/switch/markdown): A tactile toggle for settings that take effect immediately.
- [Segmented control](https://uiarc.dev/components/segmented-control/markdown): Switch between a small set of related views.
- [Slider](https://uiarc.dev/components/slider/markdown): Pick a value or a range on a track that follows your finger.
- [Calendar](https://uiarc.dev/components/calendar/markdown): Browse dates in a clear, compact month view.
- [Date picker](https://uiarc.dev/components/date-picker/markdown): Choose a date without losing context.
- [Date range picker](https://uiarc.dev/components/date-range-picker/markdown): A range picker that grows from its trigger into two months with presets and a stretching range highlight.
- [Time picker](https://uiarc.dev/components/time-picker/markdown): Choose a time with sensible keyboard behavior.
- [Color picker](https://uiarc.dev/components/color-picker/markdown): A swatch that grows into a picker with format morphing, eyedropper, saved swatches, and contrast readout.
- [Rich text editor](https://uiarc.dev/components/rich-text-editor/markdown): A lightweight editor with markdown shortcuts, a floating toolbar, a slash menu, and HTML and markdown output.
- [Signature pad](https://uiarc.dev/components/signature-pad/markdown): Smooth ink that thins with speed, with undo, replay, and PNG or SVG export.
- [File dropzone](https://uiarc.dev/components/file-dropzone/markdown): A generous target for dropping one or more files.

### Disclosure

- [Tabs](https://uiarc.dev/components/tabs/markdown): Switch between related content in the same context.
- [Breadcrumb](https://uiarc.dev/components/breadcrumb/markdown): Show where a page sits in a hierarchy.
- [Scroll area](https://uiarc.dev/components/scroll-area/markdown): A native scroll container with thin overlay scrollbars and edge fades that appear only when content overflows.
- [Accordion](https://uiarc.dev/components/accordion/markdown): Progressively reveal supporting information in place.
- [Expandable card](https://uiarc.dev/components/expandable-card/markdown): Give a dense card more room when requested.
- [Resizable panels](https://uiarc.dev/components/resizable-panels/markdown): Trade space between panes by dragging the divider between them.
- [Dialog](https://uiarc.dev/components/dialog/markdown): A focused surface for decisions that need attention.
- [Drawer](https://uiarc.dev/components/drawer/markdown): A temporary side surface for focused work.
- [Bottom sheet](https://uiarc.dev/components/bottom-sheet/markdown): A sheet that rests at a peek or full height and follows your finger.
- [Popover](https://uiarc.dev/components/popover/markdown): A small anchored surface for contextual information.
- [Hover card](https://uiarc.dev/components/hover-card/markdown): Preview a person or link on hover or focus without leaving the page.
- [Tooltip](https://uiarc.dev/components/tooltip/markdown): Short supporting text for unfamiliar controls.

### Feedback

- [Alert](https://uiarc.dev/components/alert/markdown): A persistent message that helps people recover or continue.
- [Toast](https://uiarc.dev/components/toast/markdown): Brief confirmation for a completed background action.
- [Toast stack](https://uiarc.dev/components/toast-stack/markdown): Stack short results at the edge until you reach for them.
- [Announcement bar](https://uiarc.dev/components/announcement-bar/markdown): A top banner that rotates messages, counts down, and collapses smoothly when dismissed.
- [Progress](https://uiarc.dev/components/progress/markdown): Show how much of a known task is complete.
- [Skeleton](https://uiarc.dev/components/skeleton/markdown): Reserve space while content is still loading.
- [Stepper](https://uiarc.dev/components/stepper/markdown): Show where a person is in a multi-step flow and what is done.
- [Usage meter](https://uiarc.dev/components/usage-meter/markdown): Show what fills an allowance and how close it is to the limit.

### Data

- [Pagination](https://uiarc.dev/components/pagination/markdown): Move through a long collection with clear bounds.
- [Avatar](https://uiarc.dev/components/avatar/markdown): A compact identity marker for people and accounts.
- [Avatar group](https://uiarc.dev/components/avatar-group/markdown): Show a team or set of contributors in a small space.
- [Badge](https://uiarc.dev/components/badge/markdown): A small label for status, category, or metadata.
- [Card](https://uiarc.dev/components/card/markdown): A contained group of related content and actions.
- [Metric card](https://uiarc.dev/components/metric-card/markdown): A compact summary for a number that needs context.
- [Empty state](https://uiarc.dev/components/empty-state/markdown): A useful next step when there is nothing to show yet.
- [Line chart](https://uiarc.dev/components/line-chart/markdown): A multi-series line chart with a gliding crosshair, legend toggles, and paths that morph between ranges.
- [Bar chart](https://uiarc.dev/components/bar-chart/markdown): Compare one measure across days and scrub any bar for its value.
- [Donut chart](https://uiarc.dev/components/donut-chart/markdown): A donut whose arcs morph between datasets, with the active value rolling into the center.
- [Streamgraph](https://uiarc.dev/components/streamgraph/markdown): Layered streams on a wiggle baseline that morph between ranges, with a layer you can isolate and read week by week.
- [Brush chart](https://uiarc.dev/components/brush-chart/markdown): A dense time series with an overview strip: drag a window to zoom, resize it by its handles, and read events in place.
- [Waffle chart](https://uiarc.dev/components/waffle-chart/markdown): A ten by ten unit chart where every cell is one percent, and cells fly to their new group when the data changes.
- [Slope chart](https://uiarc.dev/components/slope-chart/markdown): Before and after on two axes: lines draw in, rank moves sit beside each value, and switching datasets slides every line to its new slope.
- [Sparkline](https://uiarc.dev/components/sparkline/markdown): Show a compact trend beside a value.
- [Gauge](https://uiarc.dev/components/gauge/markdown): Show a value against a known range.
- [Activity heatmap](https://uiarc.dev/components/activity-heatmap/markdown): See a year of activity at a glance, one square per day.
- [Animated counter](https://uiarc.dev/components/animated-counter/markdown): Give changing totals a clear sense of movement.
- [Ridgeline](https://uiarc.dev/components/ridgeline/markdown): Overlapping distributions, one ridge per group: hover to lift a ridge and read its quartiles, switch datasets and every curve morphs.
- [Treemap](https://uiarc.dev/components/treemap/markdown): A squarified treemap: click to drill and the tiles grow to fill the view, with a breadcrumb back and metrics that morph every tile.
- [Sunburst](https://uiarc.dev/components/sunburst/markdown) (Pro): A hierarchy in rings: click a segment and every arc swings around it as the new centre, with a breadcrumb back and a rolling total.
- [Sankey flow](https://uiarc.dev/components/sankey-flow/markdown) (Pro): Flows between stages as ribbons with drifting particles; hover any node or ribbon to pour its share through the whole journey.
- [Funnel chart](https://uiarc.dev/components/funnel-chart/markdown) (Pro): A tapered conversion funnel with drop-off at every step, a device split that morphs the band, and dots that stream through it.
- [Radar chart](https://uiarc.dev/components/radar-chart/markdown) (Pro): Two or three profiles on one web: shapes morph when you swap a profile, and a sweep across the axes compares values in place.
- [Realtime stream](https://uiarc.dev/components/realtime-stream/markdown) (Pro): A live line that scrolls at 60fps as readings arrive, holds still on hover to read, and pops a marker on every anomaly.
- [Race bar chart](https://uiarc.dev/components/race-bar-chart/markdown) (Pro): A ranking over time: bars overtake each other on springs, values count up, and a timeline you can play or scrub.
- [Data grid](https://uiarc.dev/components/data-grid/markdown) (Pro): A spreadsheet grid with range selection, inline editing, a fill handle, and animated sorting.
- [Sortable data table](https://uiarc.dev/components/sortable-data-table/markdown): Compare structured records with sortable columns.
- [Tree view](https://uiarc.dev/components/tree-view/markdown): Navigate nested folders and structured content.
- [Filter toolbar](https://uiarc.dev/components/filter-toolbar/markdown): Keep collection filters close and easy to reset.
- [Code block](https://uiarc.dev/components/code-block/markdown): Present code with legible hierarchy and copy access.
- [Timeline](https://uiarc.dev/components/timeline/markdown): Follow what happened, newest first, grouped by day.
- [Comment thread](https://uiarc.dev/components/comment-thread/markdown): Threaded comments with replies, reactions, mentions, inline edit, and resolve.
- [Chat thread](https://uiarc.dev/components/chat-thread/markdown): A chat thread with grouped messages, reactions, read receipts, typing, and a composer with attachments.
- [Image compare](https://uiarc.dev/components/image-compare/markdown): Drag a divider across two images to see what changed.
- [Carousel](https://uiarc.dev/components/carousel/markdown): Browse a row of slides by dragging, flicking, or arrowing through them.

### Text

- [Text reveal](https://uiarc.dev/components/text-reveal/markdown): Reveal a short piece of content with restrained motion.
- [In-view title](https://uiarc.dev/components/in-view-title/markdown): Bring a section title in as it scrolls into view.
- [Text morph](https://uiarc.dev/components/text-morph/markdown): Morph a label into its next state, letter by letter.
- [Text shimmer](https://uiarc.dev/components/text-shimmer/markdown): Show ongoing work with a calm light across the words.

### Special

- [Share sheet](https://uiarc.dev/components/share-sheet/markdown) (Pro): A Share button that opens into a panel with copy link, access level, channels, and people to send to.
- [Action morph](https://uiarc.dev/components/action-morph/markdown) (Pro): A floating button that morphs into a quick-action menu, then an inline form, then back with a check.
- [Morph nav](https://uiarc.dev/components/morph-nav/markdown) (Pro): A navigation bar that morphs into rich menus, search, and a compact state as one surface.
- [Dock](https://uiarc.dev/components/dock/markdown) (Pro): A floating tool dock with a gliding label, a springy selection, and trays that grow out of it.
- [Liquid tab bar](https://uiarc.dev/components/liquid-tab-bar/markdown) (Pro): Tabs with a liquid selection that stretches between them and fills in icons as it passes.
- [Orbit menu](https://uiarc.dev/components/orbit-menu/markdown) (Pro): Hold a button and its actions orbit out, ready to pick with a drag.
- [Glass card](https://uiarc.dev/components/glass-card/markdown) (Pro): A glass info panel over a photo whose rim catches a pointer-following highlight while the card tilts; tap to morph it into a detail sheet.
- [Glass tab bar](https://uiarc.dev/components/glass-tabbar/markdown) (Pro): A floating Liquid Glass tab bar that refracts what scrolls beneath it, with a glass lens that glides, magnifies and can be dragged between tabs, and an optional search bubble; it compacts on scroll down.
- [Sheet stack](https://uiarc.dev/components/sheet-stack/markdown) (Pro): Nested sheets that stack with depth, drag to dismiss, and become stacked dialogs on wide screens.
- [Wallet stack](https://uiarc.dev/components/wallet-stack/markdown) (Pro): Fan a stack of cards and lift one out to see its activity.
- [Control center](https://uiarc.dev/components/control-center/markdown) (Pro): Workspace quick settings: tiles that morph into detail, a duration dial, and rubber-banded meters.
- [Link unfurl](https://uiarc.dev/components/link-unfurl/markdown) (Pro): A composer where pasting a URL shows a loading shimmer on the link, then unfurls it into a rich preview card with title, image and favicon in one morph, which can be collapsed back to the inline link or removed.
- [Product gallery](https://uiarc.dev/components/product-gallery/markdown) (Pro): A product gallery with a hover magnifier, gliding thumbnails, and color and size variants that crossfade photos.
- [Lightbox gallery](https://uiarc.dev/components/lightbox-gallery/markdown) (Pro): A masonry grid where photos zoom from their slot into a viewer you can swipe, pinch, and drag away.
- [Photo grid](https://uiarc.dev/components/photo-grid/markdown) (Pro): Pinch through zoom levels and open any photo straight from its cell.
- [Cover flow](https://uiarc.dev/components/cover-flow/markdown) (Pro): A depth rail of images you can throw, with soft grounded shadows and a quiet reflection.
- [Voice orb](https://uiarc.dev/components/voice-orb/markdown) (Pro): A voice mode orb that listens, thinks, and speaks, with a live transcript and call controls.
- [Now playing](https://uiarc.dev/components/now-playing/markdown) (Pro): Grow a mini player into the full player in one continuous morph.
- [Voice recorder](https://uiarc.dev/components/voice-recorder/markdown) (Pro): Record with a live waveform, review and scrub, then send the take into the thread.
- [Booking pill](https://uiarc.dev/components/booking-pill/markdown) (Pro): One pill that reshapes through party size, date, time, and a ticket.
- [Activity rings](https://uiarc.dev/components/activity-rings/markdown) (Pro): Daily goals as tick rings that sweep, count up, and trace a second lap past 100%.
- [Time dial](https://uiarc.dev/components/time-dial/markdown) (Pro): Spin a dial to pick an hour and see which team cities are at work.
- [Date reel](https://uiarc.dev/components/date-reel/markdown) (Pro): A 3D wheel date and time picker (like iOS reels) with momentum scrolling, snapping, curved perspective, and full keyboard support.
- [Slot text](https://uiarc.dev/components/slot-text/markdown): Text and numbers that spin into their new value on staggered slot machine reels.
- [Typewriter terminal](https://uiarc.dev/components/typewriter-terminal/markdown) (Pro): A terminal that types a scripted CLI session with a seeded human cadence, colors the shell syntax, and streams output lines, progress bars and spinners, with a scrubber, play/pause and replay controls.
- [Stretch refresh](https://uiarc.dev/components/stretch-refresh/markdown) (Pro): Pull a feed down and a line stretches to tell you when to let go.
- [Morph loader](https://uiarc.dev/components/morph-loader/markdown) (Pro): Tiny loaders that morph between shapes and fold into a check or a cross when done.
- [Skeleton morph](https://uiarc.dev/components/skeleton-morph/markdown) (Pro): Loading skeletons that grow into the real content, block by block, instead of swapping.
- [Orbit logos](https://uiarc.dev/components/orbit-logos/markdown) (Pro): An integrations showcase with brand logos orbiting your product mark on tilted rings.
- [Dot grid](https://uiarc.dev/components/dot-grid/markdown) (Pro): A dot field that bulges around the cursor like a lens and ripples from every click.
- [Data flow](https://uiarc.dev/components/data-flow/markdown) (Pro): Data flow illustration.
- [Payment flow](https://uiarc.dev/components/payment-flow/markdown) (Pro): A card tap goes to a processor, then the network, then the bank and back with authorization, then settlement; each hop lights up with a status label and the amount travels as a chip.
- [Multi-region failover](https://uiarc.dev/components/multi-region-failover/markdown) (Pro): Animated multi-region failover on a 2.5D stage: users stream requests through a global load balancer to two regions; the primary degrades, fails three health checks, traffic shifts smoothly to the healthy region, then it recovers, passes three checks and traffic ramps back to an even split.
- [Vector search](https://uiarc.dev/components/vector-search/markdown) (Pro): Documents drop onto a tilted embedding plane and fold into points that cluster by topic; the index links neighbours, a query is typed, embedded and lowered onto the plane, a signal hops along the graph toward it, and a widening ring lights the nearest documents with connecting lines, similarity scores and a ranked list.

## Blocks

- [Release readiness](https://uiarc.dev/components/blocks/release-readiness/markdown) (Pro): A launch checklist that keeps prerequisites, progress, and the final action together.
- [Sign up form](https://uiarc.dev/components/blocks/signup-form/markdown): An account creation flow with field validation, password strength, and a clear completion state.
- [Wallet card](https://uiarc.dev/components/blocks/wallet-card/markdown) (Pro): A compact account view with balance, recent activity, and focused money actions.
- [Logo marquee](https://uiarc.dev/components/blocks/logo-marquee/markdown): A quiet, continuously moving row of brand marks with a pause control.
- [Team directory](https://uiarc.dev/components/blocks/team-directory/markdown) (Pro): Searchable people, team filters, and a focused profile panel.
- [Project board](https://uiarc.dev/components/blocks/project-board/markdown) (Pro): A living workflow board for moving work between stages.
- [Invoice studio](https://uiarc.dev/components/blocks/invoice-studio/markdown) (Pro): An editable invoice with live totals and a clear save flow.
- [Plan comparison](https://uiarc.dev/components/blocks/plan-comparison/markdown): Compare meaningful differences between plans and billing periods.
- [Availability picker](https://uiarc.dev/components/blocks/availability-picker/markdown) (Pro): Find a meeting time across people and see the choice come together.
- [Metrics dashboard](https://uiarc.dev/components/blocks/metrics-dashboard/markdown) (Pro): A dense analytics view with KPI tabs, one inspectable chart, and top pages and sources.
- [Media player](https://uiarc.dev/components/blocks/media-player/markdown) (Pro): An audio player with a living playlist and complete playback controls.
- [Support conversation](https://uiarc.dev/components/blocks/support-conversation/markdown) (Pro): A responsive message thread with useful quick replies and live feedback.
- [Inbox triage](https://uiarc.dev/components/blocks/inbox-triage/markdown) (Pro): Process a focused inbox with archive, snooze, and restore actions.
- [Command palette](https://uiarc.dev/components/blocks/command-palette/markdown): A complete keyboard driven action surface with search, grouped results, and shortcuts.
- [Notification center](https://uiarc.dev/components/blocks/notification-center/markdown): A home for updates with read state, grouped information, and animated disclosure.
- [File upload](https://uiarc.dev/components/blocks/file-upload/markdown): A complete file selection flow with constraints, progress, and error feedback.
- [OTP input](https://uiarc.dev/components/blocks/otp-input/markdown): A six digit verification flow with paste support and keyboard navigation.
- [Multi-step form](https://uiarc.dev/components/blocks/multi-step-form/markdown) (Pro): A guided form that presents one decision at a time and preserves progress.
- [Team showcase](https://uiarc.dev/components/blocks/team-showcase/markdown) (Pro): An image led team introduction with profiles that open in place.
- [Studio perspectives](https://uiarc.dev/components/blocks/testimonial-stage/markdown) (Pro): Portrait led editorial stories with a focused reading state.
- [Changelog feed](https://uiarc.dev/components/blocks/changelog-feed/markdown): Release notes you can filter, open in place, and scroll through month by month.
- [Usage pricing](https://uiarc.dev/components/blocks/usage-pricing/markdown) (Pro): A pricing calculator that finds your plan as you drag seats and traffic.
- [AI composer](https://uiarc.dev/components/blocks/ai-composer/markdown) (Pro): A focused assistant thread where messages lift out of the composer and replies stream in.
- [Sign in](https://uiarc.dev/components/blocks/sign-in/markdown): A sign in card that morphs from email to a six digit code to your account.
- [Workspace sidebar](https://uiarc.dev/components/blocks/workspace-sidebar/markdown) (Pro): A product sidebar with a workspace switcher, live search, draggable favorites, and inline projects.
- [Settings page](https://uiarc.dev/components/blocks/settings-page/markdown) (Pro): Account settings with a gliding section nav and a save bar that morphs in as you edit.
- [Sidebar rail](https://uiarc.dev/components/blocks/sidebar-rail/markdown) (Pro): An app shell whose sidebar folds into an icon rail and slides in as a sheet on phones.
- [Docs sidebar](https://uiarc.dev/components/blocks/docs-sidebar/markdown) (Pro): A docs layout with a live filtering nav tree, version switcher, and a gliding on this page outline.
- [Integrations](https://uiarc.dev/components/blocks/integrations/markdown) (Pro): An integrations directory where Connect morphs to Connected and the filters recount as you go.
- [Billing overview](https://uiarc.dev/components/blocks/billing-overview/markdown) (Pro): A billing page where the plan card morphs into a picker and usage, invoices, and card follow.
- [API keys](https://uiarc.dev/components/blocks/api-keys/markdown) (Pro): API key management where Create key unfolds into its form and each secret is shown once.
- [Inbox sidebar](https://uiarc.dev/components/blocks/inbox-sidebar/markdown) (Pro): A mail sidebar whose Compose button grows into a composer and whose folders take dropped mail.
- [Team members](https://uiarc.dev/components/blocks/team-members/markdown) (Pro): A members list where typed emails turn into chips and fly into pending invites as seats roll.
- [Page header](https://uiarc.dev/components/blocks/page-header/markdown): A project page header that folds into a compact bar as you scroll, with tabs whose counts roll.
- [Revenue explorer](https://uiarc.dev/components/blocks/revenue-explorer/markdown) (Pro): A SaaS revenue chart you zoom with a brush while paths, axes and figures glide to the range.
- [Journey flow](https://uiarc.dev/components/blocks/journey-flow/markdown) (Pro): A Sankey of user journeys whose flows morph by channel and trace a cohort on hover.
- [Empty states](https://uiarc.dev/components/blocks/empty-states/markdown): Four empty states in one illustration whose shapes morph between scenes as you switch tabs.
- [Centered login](https://uiarc.dev/components/blocks/login-centered/markdown): A passkey-first login card on a quiet ring backdrop that morphs through email and code.
- [Immersive login](https://uiarc.dev/components/blocks/login-immersive/markdown) (Pro): A glass magic link card over dusk photography that folds its envelope shut once sent.
- [Security settings](https://uiarc.dev/components/blocks/security-settings/markdown) (Pro): An account security page with guided two-factor setup, password change and active sessions.
- [Login split](https://uiarc.dev/components/blocks/login-split/markdown) (Pro): A full screen split login: an email-first form that morphs into a password step beside a photo.
- [Cohort retention](https://uiarc.dev/components/blocks/cohort-retention/markdown) (Pro): A cohort retention triangle that morphs into retention curves and rewashes by segment.
- [Support widget](https://uiarc.dev/components/blocks/support-widget/markdown) (Pro): An in-app help launcher that grows into live article search, reading, and a chat with your team.
- [Usage forecast](https://uiarc.dev/components/blocks/usage-forecast/markdown) (Pro): A billing period usage chart with a forecast cone and a draggable budget that dates the crossing.
- [MRR waterfall](https://uiarc.dev/components/blocks/mrr-waterfall/markdown) (Pro): An MRR bridge whose floating bars morph by period and open the accounts behind each move.
- [Webhooks](https://uiarc.dev/components/blocks/webhooks/markdown) (Pro): A webhooks console with delivery history, a payload inspector and retries that roll the rate.
- [Roles and permissions](https://uiarc.dev/components/blocks/roles-permissions/markdown) (Pro): A permissions matrix with group toggles that ripple, role duplication and a review bar.
- [Metric explorer](https://uiarc.dev/components/blocks/metric-explorer/markdown) (Pro): KPI cards that open into a scrubbable chart and morph between metrics and ranges.
- [Revenue globe](https://uiarc.dev/components/blocks/revenue-globe/markdown) (Pro): A dotted globe where live payments arc home to headquarters, with a replayable day.
- [Customer galaxy](https://uiarc.dev/components/blocks/customer-galaxy/markdown) (Pro): 2,400 accounts as a drifting galaxy that spirals into clusters by plan, region or health.
- [Semantic zoom](https://uiarc.dev/components/blocks/semantic-zoom/markdown) (Pro): An infinite-zoom map of a company that reveals teams, projects, tasks and people as you fly in.
- [Layout morph](https://uiarc.dev/components/blocks/layout-morph/markdown) (Pro): A 24 card gallery that flies between grid, masonry, list, fan, carousel and a 3D helix.
- [Agent run](https://uiarc.dev/components/blocks/agent-run/markdown) (Pro): A live AI agent run: steps stream in, tool calls expand, a diff waits for approval, and it all folds into a result.
- [Week calendar](https://uiarc.dev/components/blocks/week-calendar/markdown) (Pro): A week calendar where you drag to create, move, and resize events, with color coded calendars, day and agenda views, and swipes on phones.
- [Scroll story](https://uiarc.dev/components/blocks/scroll-story/markdown) (Pro): A feature section where scrolling the copy drives a pinned product view through each step.
- [Spotlight grid](https://uiarc.dev/components/blocks/spotlight-grid/markdown) (Pro): A feature grid where light follows the pointer, cards play live demos, and a click morphs a card into its detail.
- [Invite people](https://uiarc.dev/components/blocks/invite-people/markdown) (Pro): Invite teammates with roles, bulk paste validation, a seat meter, and avatars that fly into a pending list.
- [Cart drawer](https://uiarc.dev/components/blocks/cart-drawer/markdown) (Pro): Products fly into the cart, counts roll, and a drawer handles quantities, shipping progress, and checkout.
- [Pricing calculator](https://uiarc.dev/components/blocks/pricing-calculator/markdown) (Pro): A seat slider and billing toggle drive plan cards with rolling prices and a moving recommended badge.
- [AI chat](https://uiarc.dev/components/blocks/ai-chat/markdown) (Pro): A complete AI chat with streamed markdown answers, folding reasoning, tool chips, citations, and a model switcher.
- [Checkout summary](https://uiarc.dev/components/blocks/checkout-summary/markdown) (Pro): An order summary with a promo code that becomes a chip, discount and tax lines, and pay button states.
- [Site header](https://uiarc.dev/components/blocks/site-header/markdown): A sticky website header that turns solid on scroll, with a gliding active link, mega menu panels, and a mobile sheet.
- [Site footer](https://uiarc.dev/components/blocks/site-footer/markdown): A website footer with link columns and newsletter, a minimal layout, and a large fading Arc mark.
- [Hero section](https://uiarc.dev/components/blocks/hero-section/markdown): Three full screen SaaS heroes: a live dashboard rising from the bottom edge over a drifting mesh, a workflow graph that routes sample events node by node, and editorial type over a mesh gradient.
- [FAQ section](https://uiarc.dev/components/blocks/faq-section/markdown): FAQs as an accordion, a topic rail, or a searchable list that highlights matches.
- [Contact section](https://uiarc.dev/components/blocks/contact-section/markdown): A validated contact form that morphs into a confirmation, support channels, and office cards with local times.
- [Usage billing](https://uiarc.dev/components/blocks/usage-billing/markdown) (Pro): A usage based billing dashboard with a projected spend line, meters against limits, alerts, and an upgrade that morphs into a confirm sheet.
- [KPI drilldown](https://uiarc.dev/components/blocks/kpi-drilldown/markdown) (Pro): KPI cards that expand into a full detail chart with period comparison and a breakdown table, then fold back.
- [Blog grid](https://uiarc.dev/components/blocks/blog-grid/markdown): A blog index with a featured post, category filter, post cards, pagination and an in-place reader.
- [Comparison table](https://uiarc.dev/components/blocks/comparison-table/markdown): An us versus them table with a sticky header, a highlighted column, and a stacked phone view.
- [Feature bento](https://uiarc.dev/components/blocks/feature-bento/markdown) (Pro): A six cell feature bento where small, real product UI acts each feature out on hover.
- [Stats band](https://uiarc.dev/components/blocks/stats-band/markdown): Headline numbers that count up in view, each with a tiny visual that proves it and a context line on hover, plain or in a hairline grid.
- [CTA section](https://uiarc.dev/components/blocks/cta-section/markdown): A call to action as a centered closing section, a split beside a setup card that completes itself, or a dismissible banner.
- [Newsletter signup](https://uiarc.dev/components/blocks/newsletter-signup/markdown): An email signup framed by a stack of past issues; subscribing drops the next issue, addressed to you, onto the front.
- [Product listing](https://uiarc.dev/components/blocks/product-listing/markdown) (Pro): A storefront grid with price, color and size filters, a sort menu, hover photo swaps, and quick add with a size row.
- [Product detail](https://uiarc.dev/components/blocks/product-detail/markdown) (Pro): A product page with a swipeable gallery, finish and size variants, add to bag that confirms in place, shipping, a reviews summary, and details.
- [Hero signup](https://uiarc.dev/components/blocks/hero-signup/markdown) (Pro): A full screen waitlist hero on a soft, drifting mesh gradient: the email field validates as you type and its button grows into the confirmation with your place in line.
- [Market terminal](https://uiarc.dev/components/blocks/market-terminal/markdown) (Pro): A trading terminal with a canvas candlestick chart, volume, moving averages, crosshair OHLC readout, wheel, drag and pinch zoom, a live watchlist with sparklines and flashing prices, and a market and limit order ticket.
- [Budget variance](https://uiarc.dev/components/blocks/budget-variance/markdown) (Pro): Budget against actual operating spend by department as aligned bullet charts, with favorable and unfavorable variance, a month, quarter and year to date switch that springs every bar, in-place drill-down into budget lines, and a total row.
- [Small multiples](https://uiarc.dev/components/blocks/small-multiples/markdown) (Pro): A trellis of small line charts that reads as one chart, with a synced crosshair, a shared or independent y scale that springs the axes, sorting with a FLIP reorder, a ghost of the overall total behind every panel and dimming for flat trends.
- [Connected scatter](https://uiarc.dev/components/blocks/connected-scatter/markdown) (Pro): A connected scatterplot of monthly CAC against LTV where the path draws itself in, a scrubber moves a head along the curve, and a channel switch morphs the path against a shaded 3x target line.
- [Line replay](https://uiarc.dev/components/blocks/line-replay/markdown) (Pro): A time replay line chart that draws a day of traffic with a moving playhead, a value label on the tip, a scrubber, speed control and key moments annotated as the playhead passes them.