xUI
GitHubGet started
xUI 3.0.0 · Angular 22 · Tailwind CSS 4

Angular components, one package each.

92 components styled with Tailwind CSS 4, from a button to a dock manager. Signal inputs, zoneless change detection, and light and dark as one CSS variable rather than a fork.

Get started Browse the 92 components

Already have a workspace? ng add @xui/core wires the stylesheet for you.

Live components

Workspace settings

Email notifications
Two-factor sign-in
Remember this device
Density

Pick a release date

September 2026
SunMonTueWedThuFriSat

Nothing selected

Members

6
NameRole Ada Lovelace Owner Alan Turing Admin Grace Hopper Editor Edsger Dijkstra Viewer Barbara Liskov Editor Donald Knuth Viewer
ALATGH+3

Rollout

Traffic35%
Strategy
Halt on elevated error rate
Build passed Canary

Verify it's you

Enter the six digits we sent.

0 / 6 · waiting

How was that?
—
  • Angular 22
  • Tailwind CSS 4
  • Angular CDK
  • class-variance-authority
  • tailwind-merge

A component library tailored for Angular

Directives and standalone components you compose, not a monolith you configure. Every axis typed, every colour a token, every keyboard contract from the CDK. 

pnpm add @xui/buttonpnpm add @xui/date-pickerpnpm add @xui/data-table# three packages, three components

One package per component

Install @xui/button and you ship a button, not a library. Each package exports an imports barrel for standalone components.

class="rounded-full" wins

Typed variants that merge

Every visual axis is a typed input backed by CVA, and the class input merges through tailwind-merge, so your utility wins instead of fighting the component's.

Opacity70%
opacity = signal(70)

One signal, three reads, no zone.js in the bundle.

Signals, OnPush, zoneless

Signal inputs and two-way models throughout. No zone.js, no change-detection tax for the parts of the page you are not touching.

Arrow keys move the focus, Home and End jump.

Try ←→HomeEnd

Angular CDK underneath

Overlays, focus traps, roving tabindex, typeahead and bidi come from the CDK, so keyboard behaviour is not reinvented per component.

Light and dark are one variable

Components style themselves with bg-surface and text-foreground-muted. Put .light or .dark on any element and the subtree follows; re-colour an intent and every package picks it up.

Scheme
Primary

The whole change, in CSS:

.light {  --primary: oklch(55.88% 0.154 252.84);}

Invite teammates

They'll get access to every project in Acme Design.

ALATGH+3
EditorCan commentVerified domain
Send a welcome message
Also add them to #design
Seats used7 of 10

Your coding agent gets the real API

An assistant that has not been told about xUI invents plausible inputs that do not exist. The MCP server answers from the library sources, and the skill carries the conventions.

MCP server

Every selector, signal input, two-way model, output and variant axis across all 107 packages, extracted from the decorated classes rather than a hand-kept list.

xui MCP stdio · 3.0.0
  • xui_components_listevery package, with its group
  • xui_components_getselectors, signal inputs, variant axes
  • xui_components_searchfind a package by what it does
  • xui_examples_getthe maintained Storybook examples
  • xui_tokens_listthe tokens, light and dark values
  • xui_docs_getone guide page in full
{  "mcpServers": {    "xui": {      "command": "npx",      "args": ["-y", "@xui/mcp"]    }  }}

Agent skill

The server answers what exists; the skill carries how to use it. The three-layer architecture, the token rule, the imports barrels, all in one folder your editor discovers.

  • Style only with semantic tokens: bg-surface, text-foreground-muted, border-error-muted.
  • Confirm every selector and signal input against the server before writing markup.
  • Import the package barrel, XuiButtonImports, into the standalone component.
  • Reach for the headless @xui/core/* entrypoint when the styled package does not fit.
npx degit Rikarin/xui/skills/xui .claude/skills/xui
 Read the agents guide

Two commands to the first component

ng add wires the stylesheet and the token layer. After that, every component is one more add.

Install
ng add @xui/corepnpm add @xui/button @xui/dialog @xui/icon
Use
import { Component } from '@angular/core';import { XuiButtonImports } from '@xui/button';@Component({  selector: 'app-example',  imports: [XuiButtonImports],  template: `    <button xuiButton color="primary">Save changes</button>    <button xuiButton variant="outline">Cancel</button>  `})export class Example {}

Everything in the box

92 styled packages and 15 headless entrypoints, grouped the way the Storybook is: from form controls to a dock manager and a node graph.

All components

Foundations

5

Code block, Icon, Link, Prose, Typography

Actions

3

Button, Button group, Hotkeys

Forms

27

Cascader, Checkbox, Color picker, Control card, Control group, …

Date & time

6

Date input, Date picker, Date range input, Date range picker, Time picker, …

Data display

14

Avatar, Card, Card list, Carousel, Data table, …

Navigation

9

Breadcrumb, Menubar, Navbar, Navigation menu, Pagination, …

Overlays

10

Alert, Alert dialog, Context menu, Dialog, Drawer, …

Feedback

6

Callout, Non-ideal state, Progress bar, Result, Skeleton, …

Layout

9

Accordion, Aspect ratio, Collapse, Divider, Dock manager, …

Visualisation

3

ECharts, Konva, Node graph

Headless primitives

15

A11y, Calendar, Checkbox, Date time, Date time luxon, …

Ship the first component today

Apache 2.0, no paid tier, no design system to adopt wholesale. Add the packages you need and theme them once.

Get started Star on GitHub
xUI

Angular 22 components styled with Tailwind CSS 4. One npm package per component, all of them themed from a single token layer.

3.0.0 — Apache 2.0 licensed. Built with Angular and Tailwind CSS.