Components

Browse all 182 components across seven categories: layout, navigation, content, data, typography, input, and feedback.

Container

Max-width wrapper for page sections.

<arc-container> static

Section

Page section with optional uppercase label, consistent spacing.

<arc-section> static

Full-page layout scaffold that composes a TopBar, Sidebar, and scrollable content area into a cohesive application frame. Handles responsive collapse, sidebar toggling, and optional table-of-contents rail out of the box.

<arc-app-shell> hybrid

Auth Shell

Authentication page layout with centered and split variants for sign-in, sign-up, password-reset, and other credential flows. Provides logo, form card, footer, and optional aside slots out of the box.

<arc-auth-shell> hybrid

Dashboard Grid

Responsive grid for dashboard metric cards.

<arc-dashboard-grid> static

Page Header

Page title area with positional slots for composing breadcrumbs, actions, tabs, or any content around a heading and description.

<arc-page-header> static

Page Layout

Page structure primitive that arranges content into sidebar-left, sidebar-right, centered, or wide layouts using CSS Grid. Handles responsive collapse, configurable gap and max-width, and exposes named slots for sidebar, main, and aside regions.

<arc-page-layout> hybrid

Resizable

Resizable panel with drag handle.

<arc-resizable> interactive

Settings Layout

Settings page with side navigation and content area.

<arc-settings-layout> hybrid

Split Pane

Resizable split layout with two panes.

<arc-split-pane> interactive

Status Bar

Bottom status bar with start, center, and end slots.

<arc-status-bar> static

Toolbar

Horizontal toolbar with start, center, and end slots.

<arc-toolbar> hybrid

Dock

Edge-snapped auto-hide panel with a 1px border edge line and subtle accent glow on hover-reveal. Slides in with spring easing.

<arc-dock> interactive

Masonry

Pinterest-style vertical-pack grid using CSS columns for efficient masonry layout without JavaScript.

<arc-masonry> static

Float Bar

Viewport-bottom floating toolbar with surface-overlay background, backdrop blur, and spring easing. For bulk actions, unsaved-changes prompts.

<arc-float-bar> interactive

Aspect Grid

Uniform aspect-ratio cell grid with configurable columns and ratio.

<arc-aspect-grid> static

Inset

Padding primitive consuming spacing tokens with optional negative-margin bleed mode.

<arc-inset> static

Sticky

Wrapper that goes sticky at a configurable offset and emits a stuck attribute/event for visual state changes.

<arc-sticky> interactive

Responsive Switcher

Container-query-based layout that flips between horizontal and vertical at a threshold width. No media queries needed.

<arc-responsive-switcher> static

Cluster

Flex-wrap primitive for variable-width children like tags, chips, and buttons with token gap spacing.

<arc-cluster> static

Center

Content centering primitive with max-width, intrinsic centering, and text-center options.

<arc-center> static

Tabs

Tabbed content navigation with keyboard support and ARIA roles.

<arc-tabs> hybrid

Breadcrumb

Wayfinding navigation trail that shows the user their current location within a hierarchical page structure, with separator icons and current-page indication.

<arc-breadcrumb> hybrid

Drawer

Slide-out panel with backdrop overlay, keyboard dismissal, and left/right positioning for off-canvas navigation, filters, and detail views.

<arc-drawer> interactive

Footer

Page footer with branding, link columns, and legal text. Provides a structured layout with slots for a logo, navigational link groups, social icons, and copyright information.

<arc-footer> static

Link

Styled anchor with nav, muted, and default variants.

<arc-link> static

Pagination

Page navigation control with previous/next arrows, numbered page buttons, and smart ellipsis truncation.

<arc-pagination> interactive

Scroll Spy

Tracks scroll position and highlights the active navigation link.

<arc-scroll-spy> interactive

Sidebar

Collapsible navigation sidebar with grouped sections, heading labels, and active link highlighting. Ideal for documentation sites, admin panels, and any layout that needs persistent vertical navigation.

<arc-sidebar> hybrid

Top Bar

Fixed header bar that anchors every page with a brand slot on the left, an optional center navigation area, and a right-aligned actions region for user controls, search, and settings.

<arc-top-bar> hybrid

Tree View

Hierarchical tree structure with expandable/collapsible nodes, selection tracking, keyboard navigation, and indentation guide lines.

<arc-tree-view> interactive

Scroll To Top

Floating button that appears after scrolling and smoothly returns the user to the top of the page.

<arc-scroll-to-top> interactive

Scroll Indicator

Thin progress bar that tracks scroll position of the page or a target container. Sticks to the top or bottom edge with accent or gradient fill.

<arc-scroll-indicator> interactive

Command Bar

Always-visible search input designed to sit inside a top bar. Accent-primary bottom border on focus with glow ring.

<arc-command-bar> interactive

Stepper Nav

Wizard navigation with back/next/skip controls and step validation gates. Steps connected by gradient lines with interactive routing.

<arc-stepper-nav> interactive

Bottom Nav

Mobile bottom bar with icon + label items. Active item gets accent-primary glow underline with surface-overlay background and backdrop blur.

<arc-bottom-nav> interactive

Skip Link

Accessible skip-to-content link, invisible until focused. On focus shows as accent-primary filled pill with glow ring above the page.

<arc-skip-link> interactive

Anchor Nav

Vertical or horizontal in-page link bar with active highlight. Active link gets accent-primary background pill or underline glow.

<arc-anchor-nav> interactive

Speed Dial

Floating action button that fans out secondary actions with staggered scale-in animation. Trigger is a primary icon-button.

<arc-speed-dial> interactive

Breadcrumb Menu

Each breadcrumb segment doubles as a dropdown showing sibling pages at that hierarchy level. Dropdown panels match dropdown-menu styling.

<arc-breadcrumb-menu> interactive

Rail

Ultra-narrow icon-only vertical navigation like VS Code's activity bar. Icons use text-muted at rest, accent-primary glow on active. Expands on hover.

<arc-rail> interactive

Page Indicator

Dot-based position indicator for page-level navigation or onboarding flows. Active dot fills with accent-primary and scales up.

<arc-page-indicator> interactive

Menubar

Desktop-application-style menu bar (File / Edit / View) with nested submenus, keyboard shortcuts display, and full WAI-ARIA menubar keyboard navigation.

<arc-menubar> interactive

Card

Content container with subtle border styling and hover effects. Links the entire card surface when an href is provided, creating a seamless clickable area with an animated gradient border.

<arc-card> static

Feature Card

Card with icon, heading, description, and animated hover effects.

<arc-feature-card> static

Divider

Horizontal rule with multiple visual styles from subtle to glowing.

<arc-divider> static

Accordion

Expandable content sections with smooth height animations. Ideal for FAQs, settings panels, and any UI that benefits from progressive disclosure.

<arc-accordion> hybrid

Avatar

User avatar with image or initials fallback.

<arc-avatar> static

Avatar Group

Stack of avatars with overflow count badge.

<arc-avatar-group> static

Callout

Styled callout box for tips, warnings, and info.

<arc-callout> static

Color Swatch

Color sample square with label — useful for token docs.

<arc-color-swatch> static

CTA Banner

Full-width call-to-action banner with gradient background, eyebrow text, headline, body copy, and action buttons. Ideal for landing page CTAs, marketing sections, and page closers.

<arc-cta-banner> static

Empty State

Placeholder for empty lists or search results.

<arc-empty-state> static

Icon

Renders icons from Phosphor (1,500+) or Lucide (1,900+) by name, with one-line library switching and custom icon registration.

<arc-icon> static

Skeleton

Loading placeholder with shimmer animation.

<arc-skeleton> static

Spinner

Animated loading spinner in three sizes.

<arc-spinner> static

Collapsible

A disclosure widget with a clickable heading that toggles the visibility of its slotted content using a smooth CSS grid animation.

<arc-collapsible> interactive

Carousel

A scrollable slide container with navigation arrows, dot indicators, auto-play, looping, and keyboard controls.

<arc-carousel> interactive

Infinite Scroll

Intersection Observer-powered container that fires a load event when the user scrolls near the bottom, with built-in loading spinner and end-of-list state.

<arc-infinite-scroll> interactive

Scroll Area

Styled scrollable container with custom thin scrollbar styling for Webkit and Firefox, configurable orientation, and optional max-height constraint.

<arc-scroll-area> static

Aspect Ratio

Container that enforces a consistent width-to-height ratio on its content, ideal for images, videos, and embedded media.

<arc-aspect-ratio> static

Marquee

Continuously scrolling content strip with configurable speed, direction, gap, and pause-on-hover behavior for logos, testimonials, and announcements.

<arc-marquee> static

Stack

Flexbox layout component for vertical or horizontal stacking with token-based spacing.

<arc-stack> static

Separator

Visual divider for separating content sections. Supports horizontal and vertical orientations, multiple line styles, and optional inline labels.

<arc-separator> static

Image

Enhanced image component with shimmer loading skeleton, smooth fade-in transition, error fallback, and aspect ratio presets.

<arc-image> interactive

Virtual List

Windowed list that renders only visible items for efficient scrolling through thousands of rows. Fixed item height with configurable overscan.

<arc-virtual-list> interactive

QR Code

Client-side QR code renderer that encodes any string into a crisp inline SVG. Themes automatically via currentColor, with an optional contrast card for guaranteed scanability on dark backgrounds.

<arc-qr-code> interactive

Lightbox

Full-screen image viewer on the overlay stack: open from a thumbnail, step through a gallery with wrapping prev/next navigation, zoom to 2x with drag-to-pan, and dismiss with Escape or a backdrop click.

<arc-lightbox> interactive

Image Compare

Before/after comparison with two layered images and a draggable divider revealing one over the other.

<arc-image-compare> interactive

Image Hotspots

An annotated image with glowing pin markers, each opening a small popover of detail content. Built for product-feature callouts, annotated screenshots, and simple maps.

<arc-image-hotspots> interactive

Video

House-styled video player with a glowing poster play overlay and minimal custom controls over the native video element.

<arc-video> interactive

Value Card

Horizontal card with icon and text, for values or features lists.

<arc-value-card> static

Stat

Numeric statistic display with gradient value and label.

<arc-stat> static

Badge

Compact pill-shaped label for status indicators, category tags, and notification counts. Three color variants let you encode meaning at a glance across dashboards, tables, and card layouts.

<arc-badge> static

Data Table

A data-driven table component that renders rows from a JavaScript array. Declarative column definitions via `arc-column` children control which fields appear, their headers, widths, and sort behavior. Built-in support for column sorting, row selection with checkboxes, and an empty-state fallback.

<arc-data-table> interactive

Stepper

Step indicator for multi-step workflows.

<arc-stepper> static

Table

Data-driven table with striped and compact-density variants, powered by columns and rows props.

<arc-table> static

Tag

Compact pill-shaped label with color variants, custom color support, and an optional remove button, for categorisation, filtering, and selection feedback.

<arc-tag> hybrid

Timeline

Vertical timeline with dated events.

<arc-timeline> static

Meter

Semantic gauge display with color-coded fill zones (success, warning, error) based on configurable low/high/optimum thresholds.

<arc-meter> static

Animated Number

Smooth count-up/down number animation with formatting options.

<arc-animated-number> static

List

Structured list container with optional selection, keyboard navigation, and multiple visual variants. Pairs with arc-list-item for rich content rows.

<arc-list> interactive

Diff

Line-based text diff viewer with inline and side-by-side display modes.

<arc-diff> static

Key Value

A styled definition list for displaying labeled key-value pairs. Supports horizontal and stacked layouts with optional dividers between rows.

<arc-key-value> static

Countdown Timer

Live countdown to a target date/time with days, hours, minutes, and seconds segments.

<arc-countdown-timer> interactive

Comparison

A two-column or multi-column comparison table for pricing tiers, feature breakdowns, or before/after comparisons. Each column is defined with an arc-comparison-column child element.

<arc-comparison> static

Sparkline

Tiny inline SVG chart for embedding lightweight line or bar visualizations inside tables, stat cards, and dashboards. Renders from a simple comma-separated data string with no external charting dependencies.

<arc-sparkline> static

Description List

Structured term/detail pair list in a responsive grid layout with optional dividers.

<arc-description-list> static

Chart

An SVG chart component for dashboards with line, area, bar, and donut types. Data-driven from a series array, with automatic nice-tick scales, a legend, hover crosshair and tooltips, and a visually-hidden data table for assistive technology.

<arc-chart> interactive

Data Grid

A spreadsheet-grade grid for working with tabular data: inline cell editing, multi-column sorting, pinned columns, row selection, and virtualized rendering. Columns are defined as a JavaScript array, and the grid implements the full WAI-ARIA grid keyboard pattern with a single tab stop.

<arc-data-grid> interactive

Kanban

A drag-and-drop kanban board driven by a `columns` data array. Cards can be dragged between and within columns with the pointer, or moved entirely from the keyboard with live screen-reader announcements. Column limits, tags, and descriptions are supported per card, and every move emits an `arc-card-move` event so the consumer can sync its source of truth.

<arc-kanban> interactive

Event Calendar

Scheduling calendar with month and week views that renders all-day and multi-day event chips colored by the chart palette.

<arc-event-calendar> interactive

Gauge

Radial gauge displaying a scalar value on an arc with color-coded zones (success, warning, error) and an animated sweep.

<arc-gauge> static

Waveform

Audio waveform visualization that doubles as a scrubber. Renders a consumer-computed peaks array as an SVG waveform with an accent played region and glowing playhead, and becomes a full seek control when interactive.

<arc-waveform> hybrid

Level Meter

Segmented audio level meter with peak-hold. Zone-tinted segments light in proportion to a live value, with a decaying peak line — the live vertical sibling of Meter.

<arc-level-meter> static

Clock

Live clock with a digital or analog face, optionally pinned to an IANA timezone.

<arc-clock> interactive

Uptime

Status-page uptime history strip: one slim tick per period, colored by status, with hover and keyboard detail. Accepts plain uptime fractions or explicit status objects and renders the computed overall percentage above the track.

<arc-uptime> hybrid

JSON Tree

Collapsible JSON explorer with house syntax coloring — the dev-tools inspector for API payloads, configuration objects, and structured state.

<arc-json-tree> interactive

Activity Heatmap

GitHub-style contribution calendar: a year of day cells, one column per week, each tinted by intensity on a five-step accent ramp, with hover and keyboard detail.

<arc-activity-heatmap> hybrid

Text

Typography component with variants matching the arclight type scale.

<arc-text> static

Code Block

Syntax-highlighted code display with optional filename and copy button.

<arc-code-block> hybrid

Kbd

Keyboard key indicator styled like a physical key.

<arc-kbd> static

Truncate

Multi-line text clamping with expandable show-more toggle.

<arc-truncate> interactive

Highlight

Text highlighting with search query match markers.

<arc-highlight> static

Markdown

Renders markdown content as styled HTML with zero dependencies. Supports headings, lists, code blocks, blockquotes, links, images, and inline formatting.

<arc-markdown> static

Blockquote

Styled pull-quote with optional citation for editorial emphasis.

<arc-blockquote> static

Prose

Long-form content container that applies typographic rhythm and styling to slotted HTML elements.

<arc-prose> static

Typewriter

Character-by-character text reveal animation with blinking cursor.

<arc-typewriter> interactive

Gradient Text

Inline text wrapper that applies gradient fills to text declaratively.

<arc-gradient-text> static

Number Format

Locale-aware number, currency, percentage, and compact formatter using Intl.NumberFormat.

<arc-number-format> static

Time Ago

Relative time display that auto-updates ("3 minutes ago", "yesterday").

<arc-time-ago> interactive

Terminal

Animated terminal window that types commands and prints their output line by line.

<arc-terminal> interactive

Keyboard Map

A rendered keyboard with highlighted keys and chords — the visual big sibling of Kbd and Hotkey, for shortcut documentation and editor cheat sheets.

<arc-keyboard-map> static

Button

Primary call-to-action element with three visual variants that map to action hierarchy. Supports prefix and suffix slots for icons. Renders as an anchor when given an href, making it ideal for navigation-driven actions across landing pages, toolbars, and forms.

<arc-button> hybrid

Input

Versatile form control supporting single-line text, email, password, and multiline textarea modes with built-in label, placeholder, and validation states. Pairs with Form for complete data-entry workflows.

<arc-input> hybrid

Toggle

On/off switch with smooth animation, glow effect, and ARIA switch role.

<arc-toggle> hybrid

Checkbox

Multi-select form control supporting checked, indeterminate, and disabled states. Ideal for preferences, bulk-selection patterns, and consent forms where users need to toggle one or more independent options.

<arc-checkbox> hybrid

Radio Group

Single-select option group with arrow-key navigation and ARIA radiogroup semantics. Ideal for pricing tiers, settings panels, and any context where exactly one choice must be made from a visible set of options.

<arc-radio-group> hybrid

Select

Dropdown select with searchable options, keyboard navigation, and full ARIA listbox semantics for accessible form inputs.

<arc-select> interactive

Calendar

Interactive month-view calendar grid for date selection with min/max constraints, keyboard navigation, and today highlighting.

<arc-calendar> interactive

Combobox

Searchable dropdown with type-ahead filtering.

<arc-combobox> interactive

Copy Button

One-click copy-to-clipboard button with confirmation.

<arc-copy-button> interactive

Date Picker

Calendar-based date picker with keyboard navigation.

<arc-date-picker> interactive

File Upload

Drag-and-drop file upload zone with preview.

<arc-file-upload> interactive

Form

Form wrapper with built-in validation, error aggregation, and submit handling. Composes Input, Textarea, and Button into a cohesive data-entry workflow.

<arc-form> interactive

Icon Button

Compact button that renders an icon with optional text label, supporting ghost, secondary, and primary variants.

<arc-icon-button> hybrid

Multi Select

Multi-value select with tag chips, inline search filtering, and keyboard navigation.

<arc-multi-select> interactive

Search

Search input with a magnifying glass icon, clear button, loading spinner, and autocomplete suggestions dropdown.

<arc-search> interactive

Range Slider

Dual-thumb range slider for selecting a numeric interval within a defined range, with accent-primary fill between the thumbs and live value display.

<arc-range-slider> interactive

Slider

Range input slider with a label, live numeric value display, accent-primary fill track, and customisable min/max/step.

<arc-slider> hybrid

Textarea

Multi-line text input with integrated label, placeholder, resize control, and live character count that turns red at the limit.

<arc-textarea> hybrid

Theme Toggle

Three-state theme toggle cycling through dark, light, and auto modes with animated icon transitions and localStorage persistence.

<arc-theme-toggle> interactive

Segmented Control

A radio-group-style toggle bar that renders slotted arc-option elements as a row of mutually exclusive buttons with an active highlight.

<arc-segmented-control> interactive

Number Input

A numeric stepper input with decrement and increment buttons flanking a central text field, supporting min/max clamping, step increments, and keyboard shortcuts.

<arc-number-input> interactive

Rating

A star-based rating input with hover preview, keyboard navigation, filled/unfilled SVG stars, and configurable max value.

<arc-rating> interactive

Chip

A toggleable pill-shaped element for filters, tags, or multi-select options, with a selected state highlighted in accent-primary.

<arc-chip> interactive

OTP Input

A one-time password input that renders a row of individual character boxes with auto-advance, paste support, and configurable length and input type.

<arc-otp-input> interactive

Sortable List

Drag-and-drop reorderable list with grip handles, keyboard reordering support, and visual insertion indicators.

<arc-sortable-list> interactive

Color Picker

Full-featured color picker with a saturation/lightness area, hue slider, hex input, and optional preset swatches.

<arc-color-picker> interactive

Pin Input

One-character-per-box input for PINs, OTPs, and verification codes with auto-advance, paste support, and optional masking.

<arc-pin-input> interactive

Label

Form label with required indicator, optional description text, and tooltip slot. Pairs with any input component via the `for` attribute.

<arc-label> static

Fieldset

Grouped form section with legend, description, error message, and optional card variant. Wraps related inputs with native fieldset semantics.

<arc-fieldset> static

Switch Group

Groups multiple toggle switches under a shared label with consistent sizing and disabled state. Supports vertical and horizontal layouts.

<arc-switch-group> interactive

Button Group

Connects multiple buttons into a single visual unit with shared borders and collapsed radii. Supports horizontal and vertical orientations.

<arc-button-group> hybrid

Input Group

Combines an input with prefix and suffix addon slots for labels, icons, or buttons attached to the input border.

<arc-input-group> hybrid

Hotkey

Invisible keyboard shortcut listener that supports modifier combos (Ctrl+K) and chord sequences (g i). Fires an event when the key pattern is matched.

<arc-hotkey> interactive

Time Picker

Scrollable column-based time picker with 12h/24h format support.

<arc-time-picker> interactive

Date Range Picker

Dual-calendar picker for selecting a start/end date range with presets and full keyboard navigation.

<arc-date-range-picker> interactive

Tag Input

Free-text token entry field with optional autocomplete suggestions, delimiter splitting, and duplicate rejection.

<arc-tag-input> interactive

Password Input

Password entry field with a built-in visibility toggle and an optional four-segment strength meter. Shares its styling and form behavior with Input, so mixed forms stay visually uniform.

<arc-password-input> interactive

Transfer List

Dual-listbox for moving items between an available and a selected pane, ideal for permissions and settings UIs.

<arc-transfer-list> interactive

Image Cropper

Crop-before-upload control with a draggable, resizable crop rectangle, aspect-ratio locking, zoom, and canvas export at natural image resolution.

<arc-image-cropper> interactive

Knob

Rotary knob input for continuous parameters, with a glowing 270-degree arc fill, vertical-drag interaction, magnetic detents, and a monospace value readout.

<arc-knob> interactive

Signature Pad

Canvas signature capture that participates in forms — freehand strokes serialize to a PNG data-URL and submit as the field value.

<arc-signature-pad> interactive

Masked Input

Text field that enforces a character mask as you type — dates, card numbers, phone numbers, license keys. The mask’s literals are typed for the user; value holds only the raw characters, and the raw value is what forms receive, so the mask stays presentation.

<arc-masked-input> interactive