89 Angular components,
one npm package each.
xUI is an Angular 22 component library styled with Tailwind CSS 4. Signal inputs, zoneless change detection, and a semantic token layer that makes light and dark a CSS variable rather than a fork.
Already have a workspace? ng add @xui/core wires the stylesheet for you.
Install
ng add @xui/core
pnpm add @xui/button @xui/dialog @xui/iconUse
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 {}One package per component
Install @xui/button and you ship a button, not a library. Each package exports an imports barrel for standalone components.
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.
Themed by tokens
Components style themselves with bg-surface and text-foreground-muted. Light and dark both work without a single dark: class.
Angular CDK underneath
Overlays, focus traps, roving tabindex, typeahead and bidi come from the CDK, so keyboard behaviour is not reinvented per component.
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.
Built for coding agents
An MCP server exposes every package’s real API to your editor’s assistant, extracted from the sources rather than a hand-kept list.
Everything in the box
Grouped the way the Storybook is, from form controls to a dock manager and a node graph.
Working with an AI assistant?