Headless UI primitives as native Web Components.
State machines. Zero visual opinion. Framework-agnostic.

Documentation · Storybook · Changelog

---

Architecture

┌─────────────┐     ┌──────────────────────────────────────┐
│  Zag.js     │     │  Lit 3+ Shadow DOM                   │
│  Machine    │────▶│                                      │
│             │     │  <div part="root">                   │
│  • State    │     │    <slot name="prefix"></slot>       │
│  • A11y     │     │    <slot></slot>                     │
│  • Keyboard │     │    <slot name="suffix"></slot>       │
│  • Focus    │     │  </div>                              │
└─────────────┘     └──────────────────────────────────────┘
                                    │
                    ┌───────────────┼───────────────┐
                    ▼               ▼               ▼
              ::part(root)    --line-*       Consumer CSS
              Total control   Quick adjust   Full override

Three tiers of components:

Tier	What	Examples
Pre-built	Uses @zag-js/* machine	Dialog, Select, Combobox, Tabs
Custom	Custom createMachine()	Input, Field, TagInput, Sidebar
Static	No machine, pure presentation	Badge, Separator, Card, Skeleton

Architecture details: docs/ARCHITECTURE.md

Tech stack

Runtime	Bun
Bundler	Vite 8+ with Rolldown
Components	Lit 3+
State machines	Zag.js
Tokens	Custom foundation tokens (tokens.css) + 28-palette colour system
Lint & format	Biome

Contributing

Components require a spec in docs/specs/ before implementation — see COMPONENT-SPEC-TEMPLATE.md.

git clone https://github.com/websublime/line-ui.git
cd line-ui
bun install
bun run dev

License

MIT — Made by @websublime