Components
Browse all 152 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 App Shell
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 Navigation Menu
Horizontal navigation bar with hover-triggered dropdown sub-menus and full keyboard accessibility. Designed for marketing sites, documentation hubs, and product landing pages where top-level sections expand into categorised link lists.
<arc-navigation-menu> hybrid 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 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 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 variants, powered by columns and rows props.
<arc-table> static Tag
Compact pill-shaped label with colour variants, custom colour 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 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 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 Alert
Contextual alert banner with four semantic variants and optional dismiss button for delivering timely, prominent feedback to users.
<arc-alert> hybrid Progress
Progress indicator as a bar or spinner, with determinate and indeterminate modes. Shows completion state for uploads, installations, and long-running operations.
<arc-progress> static Modal
General-purpose focus-trapping overlay with backdrop blur, slide-up animation, and ESC-to-close behavior for forms, settings, and rich content that needs full user attention.
<arc-modal> interactive Toast
Stack-managed notification toasts with auto-dismiss, variant-colored indicators, configurable position, and smooth enter/exit animations.
<arc-toast> interactive Tooltip
Contextual hint that appears on hover or focus, providing supplementary information without cluttering the UI. Supports four placement positions and a configurable show delay.
<arc-tooltip> hybrid Command Palette
Spotlight-style command palette with search and keyboard shortcuts.
<arc-command-palette> interactive Context Menu
Right-click context menu with keyboard shortcuts.
<arc-context-menu> interactive Dropdown Menu
Menu dropdown triggered by a button with keyboard navigation.
<arc-dropdown-menu> interactive Hover Card
Card that appears on hover with a delay.
<arc-hover-card> interactive Notification Panel
Notification dropdown panel triggered by a button.
<arc-notification-panel> interactive Popover
Floating content panel anchored to a trigger element, with four placement positions and automatic outside-click dismissal.
<arc-popover> interactive Sheet
A sliding overlay panel that emerges from the bottom or right edge of the viewport, with a blurred backdrop, header, scrollable body, and footer slot.
<arc-sheet> interactive Dialog
Small centered confirmation dialog wrapping arc-modal for simple confirm/cancel prompts — unsaved changes, session expiry, and discard decisions.
<arc-dialog> interactive Snackbar
Bottom-anchored single-line notification with optional action button. Darker than toast — surface-base background with accent-colored action link. Slides up, auto-dismisses.
<arc-snackbar> interactive Banner
Full-width persistent strip pinned to viewport or section top. Uses semantic variants like alert but edge-to-edge with no border-radius and a subtle gradient wash.
<arc-banner> hybrid Spotlight
Dims the entire page except a targeted element, which gets an accent-primary glow ring and elevated z-index. For onboarding and feature discovery.
<arc-spotlight> interactive Guided Tour
Multi-step onboarding that composes spotlight with popover-styled tooltips at each step. Step counter uses accent-primary gradient text.
<arc-guided-tour> interactive Inline Message
Contextual feedback that sits inline in a form or content area. Same semantic color variants as alert but compact — icon + text only, no background fill.
<arc-inline-message> static Confirm
Programmatic confirmation API that wraps dialog. Call ArcConfirm.open() and await the returned promise. Same visual treatment as dialog.
<arc-confirm> interactive Loading Overlay
Semi-transparent surface-overlay with backdrop blur covering a container or page. Centers a spinner with optional progress text.
<arc-loading-overlay> interactive Connection Status
Auto-detects online/offline via navigator API. Offline triggers a persistent warning bar with amber glow pulse. Reconnection auto-dismisses with success flash.
<arc-connection-status> interactive Announcement
ARIA live-region wrapper with no visual output. Announces dynamic content changes to screen readers. Zero visual footprint — pure accessibility utility.
<arc-announcement> static Progress Toast
Toast variant with embedded progress bar for long-running operations. Same positioning and animation as toast but persists until complete.
<arc-progress-toast> interactive