Getting Started

Everything you need to start building with ARC UI — from installation to your first component.

Overview

ARC UI is a component library built on Lit Web Components. Every component works natively in the browser. We built a custom code generator called Prism that reads the Lit source and automatically produces idiomatic bindings for React, Vue, Svelte, Angular, Solid, and Preact — all from a single component definition.

Installation

npm

npm install @arclux/arc-ui lit

pnpm

pnpm add @arclux/arc-ui lit

yarn

yarn add @arclux/arc-ui lit

CDN: No build step? Add a single script tag instead — see Framework Setup below.

Quick Start

Import the registration entry point to register all components, then use them in your markup:

Import tokens & register components

import '@arclux/arc-ui/base.css';
import '@arclux/arc-ui/register';

Import patterns:

import '@arclux/arc-ui/register' — register all components (simplest)
import '@arclux/arc-ui/button' — register one component + deps (tree-shakeable)
import { ArcButton } from '@arclux/arc-ui' — named class export (registers all components — not tree-shakeable)

Use in HTML

<arc-button variant="primary">Get Started</arc-button>

<arc-card>
  <h3 slot="header">Welcome</h3>
  <p>Build beautiful interfaces with zero configuration.</p>
  <arc-button slot="footer" variant="ghost" size="sm">
    Learn more
  </arc-button>
</arc-card>

<arc-input label="Email" placeholder="you@example.com">
</arc-input>

<arc-toggle label="Dark mode"></arc-toggle>

See it live

Get Started

v2.1.0

That's it — no config files, no build plugins, no providers to wrap your app in. Web components work everywhere.

Framework Setup

ARC UI works with any framework out of the box. We built a custom code generator called Prism that reads the Lit source and produces a native wrapper package for each framework — typed props, idiomatic events, and tree-shakeable imports, all from a single component definition.

npm install @arclux/arc-ui-react

import '@arclux/arc-ui/base.css';
import { Button, Card } from '@arclux/arc-ui-react';

function App() {
  return (
    <Card>
      <h3>Hello</h3>
      <Button variant="primary" onArcClick={handleClick}>
        Click Me
      </Button>
    </Card>
  );
}

npm install @arclux/arc-ui-vue

<script setup>
import '@arclux/arc-ui/base.css';
import { ArcButton, ArcCard } from '@arclux/arc-ui-vue';
</script>

<template>
  <ArcCard>
    <h3>Hello</h3>
    <ArcButton variant="primary" @arc-click="handleClick">
      Click Me
    </ArcButton>
  </ArcCard>
</template>

npm install @arclux/arc-ui-svelte

<script>
  import '@arclux/arc-ui/base.css';
  import { ArcButton, ArcCard } from '@arclux/arc-ui-svelte';
</script>

<ArcCard>
  <h3>Hello</h3>
  <ArcButton variant="primary" on:arc-click={handleClick}>
    Click Me
  </ArcButton>
</ArcCard>

No build step required. Add a script tag and go:

<link rel="stylesheet"
  href="https://unpkg.com/@arclux/arc-ui/base.css">
<script type="module"
  src="https://unpkg.com/@arclux/arc-ui/register">
</script>

<arc-button variant="primary">Click Me</arc-button>

Our Prism generator also produces wrappers for Angular, Solid, and Preact. See the Frameworks guide for complete setup instructions.

Theming

ARC UI ships with dark and light themes. Toggle between them with the data-theme attribute on any element — typically the <html> or <body> tag.

Dark (default)

<html data-theme="dark">

Light

<html data-theme="light">

Auto (OS preference)

<script>
  const theme = window.matchMedia('(prefers-color-scheme: light)').matches
    ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', theme);
</script>

Create fully custom themes by overriding design tokens. Use the Theme Synthesizer to generate a custom theme visually.

Design Tokens

ARC UI's visual language is driven by 100+ CSS custom properties. Import the tokens stylesheet to use them in your own CSS:

@import '@arclux/arc-ui/base.css';

Then reference tokens in your styles:

.my-component {
  color: var(--text-primary);
  background: var(--bg-card);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  box-shadow: var(--shadow-md);
}

Colors

Spacing --space-xs · sm · md · lg · xl · 2xl

Radii --radius-xs · sm · md · lg · xl · full

Shadows --shadow-xs · sm · md · lg · xl

See the full Design Tokens reference for every available token.

TypeScript

Our Prism code generator produces full TypeScript definitions for every framework wrapper. For web components in TypeScript projects, add the type declarations:

// tsconfig.json
{
  "compilerOptions": {
    "types": ["@arclux/arc-ui/types"]
  }
}

This gives you autocomplete and type checking for all arc-* elements in JSX and template literals.

Getting Started

Overview

Installation

Quick Start

Framework Setup

Theming

Design Tokens

TypeScript

Next Steps

See Also

ARC UI

Arclight