Arc Library components

Arc Library: free, open source React components with calm motion. Copy the code or install with the shadcn CLI.

Components: 143
Framework: React
Stack: React, TypeScript, CSS Modules
License: MIT
GitHub stars: 87
Source: https://github.com/kuratlielia/arc-library
Website: https://uiarc.dev
Install: npx shadcn@latest add https://uiarc.dev/r/{name}.json

All Arc Library components

Accordion: Progressively reveal supporting information in place.
Action button: A compact button for frequent toolbar actions.
Action swap: Swap an action label while preserving its place and intent.
Activity heatmap: See a year of activity at a glance, one square per day.
Alert: A persistent message that helps people recover or continue.
Animated counter: Give changing totals a clear sense of movement.
Announcement bar: A top banner that rotates messages, counts down, and collapses smoothly when dismissed.
Avatar: A compact identity marker for people and accounts.
Avatar group: Show a team or set of contributors in a small space.
Badge: A small label for status, category, or metadata.
Bar chart: Compare one measure across days and scrub any bar for its value.
Billing toggle: A monthly and yearly switch with a savings badge and prices that roll to the new amount.
Blog grid: A blog index with a featured post, category filter, post cards, pagination and an in-place reader.
Bottom sheet: A sheet that rests at a peek or full height and follows your finger.
Breadcrumb: Show where a page sits in a hierarchy.
Brush chart: A dense time series with an overview strip: drag a window to zoom, resize it by its handles, and read events in place.
Button: A clear, responsive action with quiet secondary states.
Button group: Related actions joined into one surface with hairline dividers: a hover highlight glides between segments, the pressed one answers in…
Calendar: Browse dates in a clear, compact month view.
Card: A contained group of related content and actions.
Card stack: Review a deck one card at a time, with a throw and an undo.
Carousel: Browse a row of slides by dragging, flicking, or arrowing through them.
Changelog feed: Release notes you can filter, open in place, and scroll through month by month.
Chat thread: A chat thread with grouped messages, reactions, read receipts, typing, and a composer with attachments.
Checkbox: A binary choice with a precise, legible state.
Chip group: Filter by a few facets with chips that morph as you pick them.
Code block: Present code with legible hierarchy and copy access.
Color picker: A swatch that grows into a picker with format morphing, eyedropper, saved swatches, and contrast readout.
Combobox: Search and select from a list without leaving the field.
Command palette: A complete keyboard driven action surface with search, grouped results, and shortcuts.
Comment thread: Threaded comments with replies, reactions, mentions, inline edit, and resolve.
Comparison table: An us versus them table with a sticky header, a highlighted column, and a stacked phone view.
Confirm morph: A destructive button that morphs into an inline confirmation, a spinner, and a result with undo.
Contact section: A validated contact form that morphs into a confirmation, support channels, and office cards with local times.
Context menu: Secondary actions kept close to the selected object.
Cookie consent: A consent bar that morphs into preferences and folds into a reopen button.
Copy button: Copy a value with immediate confirmation.
Countdown: A launch countdown with rolling digits that morphs into a live state at zero.
CTA section: A call to action as a centered closing section, a split beside a setup card that completes itself, or a dismissible banner.
Date picker: Choose a date without losing context.
Date range picker: A range picker that grows from its trigger into two months with presets and a stretching range highlight.
Dialog: A focused surface for decisions that need attention.
Donut chart: A donut whose arcs morph between datasets, with the active value rolling into the center.
Drawer: A temporary side surface for focused work.
Dropdown menu: A focused list of actions anchored to a trigger.
Elastic slider: A slider that stretches like rubber past its ends, with a swaying value tag and detents the thumb clicks into.
Empty state: A useful next step when there is nothing to show yet.
Empty states: Four empty states in one illustration whose shapes morph between scenes as you switch tabs.
Expandable card: Give a dense card more room when requested.
Expandable text: 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…
Expanding button group: 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…
Expanding search: An icon that morphs into a search field with results beneath it.
FAQ section: FAQs as an accordion, a topic rail, or a searchable list that highlights matches.
File dropzone: A generous target for dropping one or more files.
File upload: A complete file selection flow with constraints, progress, and error feedback.
Filter toolbar: Keep collection filters close and easy to reset.
Floating button group: 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…
Gauge: Show a value against a known range.
Hero section: Three full screen SaaS heroes: a live dashboard rising from the bottom edge over a drifting mesh, a workflow graph that routes sample…
Hold to confirm: Confirm a destructive action by holding, not tapping.
Hover card: Preview a person or link on hover or focus without leaving the page.
Icon morph: Icons that morph between states: menu to close, play to pause, copy to check, and more.
Image compare: Drag a divider across two images to see what changed.
In-view title: Bring a section title in as it scrolls into view.
Inline edit: Rename in place: the text becomes a field without moving.
Input: A single line field with clear labels and useful states.
JSON viewer: A collapsible JSON tree with search, paging for long arrays, and copy value or path.
Line chart: A multi-series line chart with a gliding crosshair, legend toggles, and paths that morph between ranges.
Centered login: A passkey-first login card on a quiet ring backdrop that morphs through email and code.
Logo marquee: A quiet, continuously moving row of brand marks with a pause control.
Mention input: A textarea with @people and #channel mentions that act as single tokens, with suggestions at the caret.
Metric card: A compact summary for a number that needs context.
Money input: A currency field with live grouping, stable width, rolling digits, and minor-unit output.
Morph select: A select whose trigger grows into the list, with a gliding highlight and type-ahead.
Multi-select: Select several values while keeping the field readable.
Newsletter signup: An email signup framed by a stack of past issues; subscribing drops the next issue, addressed to you, onto the front.
Notification center: A home for updates with read state, grouped information, and animated disclosure.
Number field: Enter a bounded number with clear increment controls.
Onboarding checklist: Guide a new workspace through setup, one step at a time.
OTP input: A six digit verification flow with paste support and keyboard navigation.
Page header: A project page header that folds into a compact bar as you scroll, with tabs whose counts roll.
Pagination: Move through a long collection with clear bounds.
Password field: Capture sensitive text with a visible reveal control.
Password strength: Show how strong a new password is while it is typed.
Phone input: A phone field with a country picker, formatting as you type, and E.164 output.
Plan comparison: Compare meaningful differences between plans and billing periods.
Popover: A small anchored surface for contextual information.
Progress: Show how much of a known task is complete.
Radio cards: Selectable option cards with a sliding selection ring, price and description slots, and radio keyboard behavior.
Radio group: Choose one option from a visible set.
Range histogram slider: A price range over a live histogram of the data, lighting the bars inside the range and settling on bar edges.
Rating: A simple, accessible way to capture a numeric opinion.
Reactions: Acknowledge a post in one tap, with counts that roll.
Reorderable list: Organize items with direct drag and drop.
Resizable panels: Trade space between panes by dragging the divider between them.
Rich text editor: A lightweight editor with markdown shortcuts, a floating toolbar, a slash menu, and HTML and markdown output.
Ridgeline: Overlapping distributions, one ridge per group: hover to lift a ridge and read its quartiles, switch datasets and every curve morphs.
Ruler slider: A tape of ticks that slides under a fixed needle, with momentum, snapping, and a rolling readout.
Scroll area: A native scroll container with thin overlay scrollbars and edge fades that appear only when content overflows.
Scrub input: A Figma-style number field: drag the label to scrub, or type values, units, and arithmetic.
Search field: A recognizable search entry point with clear affordances.
Segmented control: Switch between a small set of related views.
Select: A compact choice field with a keyboard friendly menu.
Shortcut recorder: Record key combinations into key caps, with conflict warnings, Kbd, and a searchable cheatsheet.
Sign in: A sign in card that morphs from email to a six digit code to your account.
Signature pad: Smooth ink that thins with speed, with undo, replay, and PNG or SVG export.
Sign up form: An account creation flow with field validation, password strength, and a clear completion state.
Site footer: A website footer with link columns and newsletter, a minimal layout, and a large fading Arc mark.
Site header: A sticky website header that turns solid on scroll, with a gliding active link, mega menu panels, and a mobile sheet.
Skeleton: Reserve space while content is still loading.
Slider: Pick a value or a range on a track that follows your finger.
Slope chart: 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.
Slot text: Text and numbers that spin into their new value on staggered slot machine reels.
Sortable data table: Compare structured records with sortable columns.
Sparkline: Show a compact trend beside a value.
Split button: A primary action with a menu of nearby alternatives.
Stats band: 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.
Stepper: Show where a person is in a multi-step flow and what is done.
Streamgraph: Layered streams on a wiggle baseline that morph between ranges, with a layer you can isolate and read week by week.
Swipe actions: Reveal row actions with a swipe, or from the same actions in a menu.
Switch: A tactile toggle for settings that take effect immediately.
Tabs: Switch between related content in the same context.
Tag input: Turn short text values into removable tags.
Text morph: Morph a label into its next state, letter by letter.
Text reveal: Reveal a short piece of content with restrained motion.
Text shimmer: Show ongoing work with a calm light across the words.
Textarea: A multiline field for notes, descriptions, and longer text.
Theme switcher: Four smooth ways to move between light and dark appearance.
Eclipse: The next appearance crosses the page like an eclipse.
Rise: The next appearance rises into place.
Split: The next appearance opens from a slim center seam.
Time picker: Choose a time with sensible keyboard behavior.
Timeline: Follow what happened, newest first, grouped by day.
Toast: Brief confirmation for a completed background action.
Toast stack: Stack short results at the edge until you reach for them.
Toggle group: 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…
Tooltip: Short supporting text for unfamiliar controls.
Tree table: A table with nested rows, tri-state selection, hierarchy-preserving sort, and lazy-loaded children.
Tree view: Navigate nested folders and structured content.
Treemap: A squarified treemap: click to drill and the tiles grow to fill the view, with a breadcrumb back and metrics that morph every tile.
Usage meter: Show what fills an allowance and how close it is to the limit.
User menu: Your account, settings, theme, and sign out behind the avatar. Opens as a bottom sheet on phones.
Waffle chart: A ten by ten unit chart where every cell is one percent, and cells fly to their new group when the data changes.

Arc Library components

All Arc Library components

Browse by category