Announcing ARC UI: 166 Web Components, Open Source

I’m the kind of engineer who builds my own tools. There are great component libraries out there; I wanted full control of the web application experience, from start to finish. Today I’m open-sourcing the result: ARC UI, a Lit-based web component library with 166 production-ready components across seven tiers.

The site you’re reading this on runs on it.

The motivation

When you build custom software for clients across different frameworks and domains, you start to notice how much time goes into wiring up the same UI patterns project after project. A nav bar here, a form system there, a toast notification that behaves slightly differently in every codebase.

I wanted a single component system I could bring to every project. I’d understand it inside and out, fix it in an afternoon instead of waiting on an upstream PR, and it would work the same way whether the project was Astro, React, Vue, or plain HTML. Building it myself meant I’d know exactly how every component behaves, where the edge cases are, and how to extend it when a client needs something specific.

What’s in the box

ARC UI ships 166 components organized into seven tiers:

• Layout: app shells, dashboard grids, split panes, masonry, resizable panels, sticky headers, toolbars
• Navigation: top bars, sidebars, tabs, breadcrumbs, pagination, command bars, scroll spy, tree views
• Content: cards, feature cards, carousels, accordions, lightboxes, image compare, dividers, empty states
• Data Display: data grids, charts, stats, gauges, sparklines, diffs, timelines, kanban boards, activity heatmaps
• Typography: text, gradient text, typewriter, prose, markdown, code blocks, terminals, keyboard maps
• Input: form fields, selects, comboboxes, date pickers, file uploads, sliders, signature pads, image croppers
• Feedback: toasts, alerts, dialogs, sheets, command palettes, progress indicators, popovers, hover cards

Every component is a native web component built on Lit. Shadow DOM encapsulation means styles don’t leak. Slot-based composition means you control the content. Standard HTML attributes and custom events mean integration works the same regardless of your framework.

Prism: one source, seven frameworks

Every component is written once as a Lit web component, and my Prism code generator produces native wrappers for React, Vue 3, Svelte 5, Angular, Solid, Preact, and standalone HTML/CSS. Each wrapper is an idiomatic component for its framework, generated from a single source of truth.

Frameworks come and go, and the web platform stays. I wanted a component system that outlasts any single framework decision, mine or my clients’, while still feeling native to each framework’s developers.

Design tokens as CSS custom properties

ARC UI includes a built-in design token system: 230 semantic tokens covering colors, spacing, typography, radii, and shadows, plus 272 utility classes for the gaps between components. All exposed as CSS custom properties that you inject once and every component picks up automatically.

You import cssVariables from @arclux/arc-ui/tokens and drop it into your layout. There’s no Tailwind config, SCSS, or build plugin involved; they’re CSS custom properties the browser reads natively.

Want to retheme the entire library? Override four base tokens and every component, gradient, glow, and focus ring follows. I also ship built-in theme presets and a token synthesizer for generating custom themes without hand-tuning every variable.

I dogfood it

I deleted 13 custom Astro components from this site when I migrated to ARC UI and replaced them with their library equivalents. The navigation, footer, buttons, accordions, form fields, containers, and sections are all ARC UI. The documentation site at arcui.dev is built with it too.

If a component doesn’t hold up in my own production environment, it doesn’t ship. Every rough edge I hit, I fix upstream. The library gets better because I use it daily, and I’m motivated to keep it that way because my own work depends on it.

Performance and accessibility

Every component is designed for minimal JavaScript overhead. Lit’s reactive property system updates only what changed, with no virtual DOM diffing. Components are tree-shakeable, SSR-compatible, and CDN-ready with no build step required.

Accessibility is part of the component architecture from the start: ARIA APG patterns, keyboard navigation, focus management, and reduced-motion support. axe-core audits run in CI on every build, and every component gets an SSR render check before a release ships.

Get started

ARC UI is available now at arcui.dev. The docs cover installation, token configuration, and every component with live examples.

Why I built it

I built ARC UI because I wanted to own the full stack of my client work, down to the UI primitives. It makes me faster, gives me more control, and means I can fix anything that breaks without waiting on anyone. If that approach resonates with how you build software, give it a look.