Arc Ui

arclight-digital

ARC UI (Arc Reusable Components) - Framework-agnostic design system built with Lit Web Components. Use with React, Vue, Svelte, or vanilla JS.

Download

ARC UI

ARC Reactive Components — a modern, dark-first component library built on web standards

Documentation · Getting Started · Components · Theme Synthesizer

ARC UI is a design system and component library built on Lit web components. Write components once in Lit, then use Prism — our custom code generator — to produce native wrappers for React, Vue, Svelte, Angular, Solid, Preact, and standalone HTML/CSS. One source of truth, seven framework targets, zero runtime dependencies beyond Lit.

Quick Start

npm install @arclux/arc-ui lit

<arc-button variant="primary">Get Started</arc-button>
<arc-card>
  <span slot="heading">Hello, ARC</span>
  <p>A card with gradient hover borders and ambient glow.</p>
</arc-card>

React

npm install @arclux/arc-ui-react

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

function App() {
  return (
    <Card heading="Hello, ARC">
      <Button variant="primary">Get Started</Button>
    </Card>
  );
}

CDN (zero JS)

<link rel="stylesheet" href="https://unpkg.com/@arclux/arc-ui-html/css/arc-ui.css">

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

Framework Packages

Framework	Package	Install
Web Components	`@arclux/arc-ui`	`npm i @arclux/arc-ui lit`
React	`@arclux/arc-ui-react`	`npm i @arclux/arc-ui-react`
Vue 3	`@arclux/arc-ui-vue`	`npm i @arclux/arc-ui-vue`
Svelte 5	`@arclux/arc-ui-svelte`	`npm i @arclux/arc-ui-svelte`
Angular	`@arclux/arc-ui-angular`	`npm i @arclux/arc-ui-angular`
Solid	`@arclux/arc-ui-solid`	`npm i @arclux/arc-ui-solid`
Preact	`@arclux/arc-ui-preact`	`npm i @arclux/arc-ui-preact`
HTML / CSS	`@arclux/arc-ui-html`	`npm i @arclux/arc-ui-html`

All framework packages are generated from the same Lit source and stay in sync automatically.

Components

170+ components organized across seven tiers:

Tier	Count	Highlights
Layout	21	App Shell, Dashboard Grid, Page Layout, Split Pane, Dock, Resizable, Masonry
Navigation	28	Top Bar, Sidebar, Tabs, Breadcrumb, Command Bar, Drawer, Tree View, Speed Dial
Content	28	Card, Accordion, Carousel, Avatar, CTA Banner, Divider, Infinite Scroll, Virtual List
Data	23	Data Table, Stepper, Timeline, Badge, Tag, Stat, Sparkline, Comparison, Diff
Input	36	Button, Input, Select, Combobox, Date Picker, File Upload, Rating, Slider, Hotkey
Feedback	24	Modal, Dialog, Toast, Command Palette, Tooltip, Sheet, Popover, Guided Tour
Typography	12	Code Block, Markdown, Kbd, Gradient Text, Typewriter, Prose, Blockquote

Browse the full catalog at arcui.dev/docs/components.

Design Tokens

Every visual decision — colors, spacing, typography, shadows, glows — is a CSS custom property. Override 2–4 base tokens and the entire system cascades:

:root {
  --accent-primary:       rgb(16, 185, 129);
  --accent-primary-rgb:   16, 185, 129;
  --accent-secondary:     rgb(6, 182, 212);
  --accent-secondary-rgb: 6, 182, 212;
}

Compound tokens (gradients, glows, focus rings) reference the base accents through var(), so every gradient, card hover, and glow line updates automatically.

Theme Modes

<html data-theme="dark">   <!-- Default -->
<html data-theme="light">  <!-- Light theme -->
<html data-theme="auto">   <!-- Follow OS preference -->

Use the theme-fixed class for regions that always stay dark (e.g., top bar, footer).

Token Categories

Backgrounds, text, borders, accents, spacing (xs–4xl), type scale, shadows, radii, z-index, transitions, glows, and gradients. See the Token Reference for the full list.

How Prism Works

Prism reads Lit web component source files — parsing properties, styles, slots, events, and CSS parts — then generates idiomatic wrappers for each target:

React — @lit/react createComponent wrappers with TypeScript types
Vue 3 — Single-file components with prop definitions
Svelte 5 — Native Svelte components
Angular — Standalone components with CUSTOM_ELEMENTS_SCHEMA
Solid — Solid component wrappers
Preact — Preact-compatible components
HTML/CSS — Standalone CSS extracted from Shadow DOM + plain HTML examples

One command keeps everything in sync:

pnpm generate

Project Structure

arc-ui/
  shared/
    tokens.js               # Design tokens (JS source of truth)
    base.css                 # Generated from tokens.js
  packages/
    web-components/          # Lit source — canonical component code
    react/                   # Generated by Prism
    vue/                     # Generated by Prism
    svelte/                  # Generated by Prism
    angular/                 # Generated by Prism
    solid/                   # Generated by Prism
    preact/                  # Generated by Prism
    html/css/                # Generated standalone CSS
    html/examples/           # Generated HTML examples
    brand/                   # Logo and brand assets (@arclux/brand)
  docs/                      # Astro documentation site (arcui.dev)

Only packages/web-components/ and shared/tokens.js are hand-edited. Everything else is generated.

Development

pnpm install          # Install dependencies
pnpm dev              # Start Astro docs dev server
pnpm generate         # Regenerate tokens + all framework wrappers

Browser Support

Browser	Version
Chrome	Last 2 versions
Firefox	Last 2 versions
Safari	16.4+
Edge	Last 2 versions

License

MIT — Arclight Digital, LLC

Top categories