Getting Started
ARC UI is 182 Lit web components that run natively in the browser, with typed wrappers generated for seven frameworks from the same source. One install, one import, and you are rendering.
Install
One runtime dependency — Lit. The CDN tab needs no build step at all.
Your First Component
- Import the tokens and register the components
The stylesheet carries every design token; the register module defines all 182 custom elements.
- Write the markup
They are HTML elements. No provider, no wrapper, no client directive.
- That is it — this is that markup, live
Rendered by this page from the snippet above, not a screenshot of it.
Get Started
Import Patterns
Three ways in, and the one you want depends on whether you are shipping a page or an app. Start at the top and move down when bundle size starts to matter.
@arclux/arc-ui/register Every component. Simplest, and the right default while you are exploring. @arclux/arc-ui/button One component and its dependencies. Tree-shakeable — what a production app should use. { ArcButton } from '@arclux/arc-ui' The named class, for extending or instantiating in script. Pulls in the full registry. arc-code-block is the one exception: it carries a syntax highlighter, so it
is excluded from every barrel. Import it at @arclux/arc-ui/code-block.
Framework Setup
Prism reads the Lit source and generates a native wrapper package per framework — typed props, idiomatic events, tree-shakeable imports. Same components, different import:
The Frameworks guide covers install and usage for each one, including the SSR story.
Theming
Three theme modes, one attribute on <html>:
The toggle in this site's top bar sets exactly that attribute — try it. For a theme of your own, override the tokens (see Theming) or build one visually in the Theme Synthesizer and export it.
Design Tokens
213 custom properties drive the visual language, and they are the same ones the components read. Import the stylesheet and your own CSS speaks the same system:
--space-xs · sm · md · lg · xl · 2xl --radius-xs · sm · md · lg · xl · full --shadow-xs · sm · md · lg · xl The Design Tokens reference lists every one.
TypeScript
The framework wrappers ship their own types. For plain web components, add the ambient
declarations and every arc-* element gets autocomplete and checking in JSX
and template literals:
Going to Production
Nothing here is needed to build with ARC UI — it is what to do once you are shipping it.
A custom element renders its fallback content until JavaScript registers it.
base.css ships the guard for that — :not(:defined) { opacity: 0 }
— so unregistered components stay hidden and fade in as their definitions land. On a
page registering many of them, two additions make the upgrade invisible.
Register what is above the fold first. Static imports of the components visible on first paint form a small, fast chunk; the full registry loads lazily behind it.
Reserve space for layout-critical elements. A hidden element still occupies layout, so give shell components their final size before they upgrade and nothing shifts when the definitions arrive.
This site does exactly that — the visible frame upgrades from a chunk roughly an eighth the size of the full registry. If you server-render, see Server Rendering: every component emits declarative shadow DOM, so the markup arrives styled before any of this matters.