@xui/node-graph

v2.2.0

Published

2 days ago

Modern Angular 22 UI Library based on TailwindCSS

0High
0Medium
0Low

xUI is an Angular 22 component library styled with Tailwind CSS 4. You compose it from directives and standalone components rather than configuring one monolith, and the set goes well past the primitives: data tables, dock managers, omnibars, node graphs and date ranges are packages here, not things you are left to build.

import { XuiButtonImports } from '@xui/button';

@Component({
  imports: [XuiButtonImports],
  template: `<button xuiButton color="primary">Save changes</button>`
})
export class Example {}

Features

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 throughout. Signal inputs, OnPush and zoneless change detection; no zone.js required.
Themed by tokens, not overrides. Components style themselves with bg-surface, text-foreground-muted, border-error-muted. Light and dark both work without a single dark: class, and re-colouring an intent is one CSS variable.
Typed variants. Every visual axis is a typed input backed by CVA, and the class input merges through tailwind-merge — your utility wins instead of fighting the component's.
Angular CDK underneath. Overlays, focus traps, roving tabindex, typeahead, drag and drop and bidi come from @angular/cdk, so keyboard behaviour and RTL are not reimplemented per component.
Built for coding agents. An MCP server and an agent skill expose the real API of every package — see AI coding agents.

Requirements

| | | | ----------------------- | --- | | Angular | 22 | | Tailwind CSS | 4 | | Node (development only) | 24 |

Getting started

ng add @xui/core

That installs the core package and wires your global stylesheet: the theme import, the CDK overlay stylesheet, and a @source glob pointing at the published packages. It is idempotent, so running it again only adds what is missing. Use nx add @xui/core in an Nx workspace, and --skip-overlay if you will not use dialogs, drawers, popovers, tooltips, menus or toasts.

Then add the components you need:

pnpm add @xui/button @xui/dialog @xui/icon

Theming

To wire the styles by hand, import the token layer once after Tailwind:

@import 'tailwindcss';
@import '@xui/core/styles/theme.css';

/* Only needed for an overlay surface — popover, tooltip, menu, dialog, drawer
   or toast. Without it, overlays render in the document flow. */
@import '@angular/cdk/overlay-prebuilt.css';

/* Tailwind only emits utilities it can see, and it cannot see node_modules by default. */
@source '../node_modules/@xui';

Put .dark (or [data-theme='dark']) on <html> to switch themes; with neither present the theme follows prefers-color-scheme. Both selectors work on any element, so a subtree can render in the opposite theme.

Re-theme by overriding tokens after the import. The darker / lighter / subtle / muted / emphasis steps of each intent are derived, so one declaration re-colours the whole ramp:

:root {
  --primary: var(--color-violet-600);
  --surface-inset: var(--color-zinc-50);
}

Controls share one density scale — 24 / 30 / 40px for sm / default / lg — so a button, an input and a date field on the same row line up. Override --control-height-md to re-tune the library.

The full token reference, rendered in both themes, is the Design tokens page in Storybook.

Components

Foundations — @xui/icon · @xui/link · @xui/text

Actions — @xui/button · @xui/button-group · @xui/hotkeys

Forms — @xui/cascader · @xui/checkbox · @xui/color-picker · @xui/control-card · @xui/control-group · @xui/editable-text · @xui/file-input · @xui/form-field · @xui/html-select · @xui/input · @xui/input-otp · @xui/label · @xui/multi-select · @xui/numeric-input · @xui/radio · @xui/rate · @xui/rich-text-editor · @xui/segmented-control · @xui/select · @xui/slider · @xui/suggest · @xui/switch · @xui/tag-input · @xui/textarea · @xui/transfer · @xui/tree-select · @xui/upload

Date & time — @xui/date-input · @xui/date-picker · @xui/date-range-input · @xui/date-range-picker · @xui/time-picker · @xui/timezone-select

Data display — @xui/avatar · @xui/card · @xui/card-list · @xui/carousel · @xui/data-table · @xui/descriptions · @xui/entity-title · @xui/kbd · @xui/statistic · @xui/status · @xui/table · @xui/tag · @xui/timeline · @xui/tree

Navigation — @xui/breadcrumb · @xui/menubar · @xui/navbar · @xui/navigation-menu · @xui/pagination · @xui/panel-stack · @xui/steps · @xui/tabs

Overlays — @xui/alert · @xui/alert-dialog · @xui/context-menu · @xui/dialog · @xui/drawer · @xui/menu · @xui/omnibar · @xui/popover · @xui/toast · @xui/tooltip

Feedback — @xui/callout · @xui/non-ideal-state · @xui/progress-bar · @xui/result · @xui/skeleton · @xui/spinner

Layout — @xui/accordion · @xui/aspect-ratio · @xui/collapse · @xui/divider · @xui/dock-manager · @xui/overflow-list · @xui/scroll-area · @xui/section · @xui/splitter

Visualisation — @xui/echarts · @xui/konva · @xui/node-graph

AI coding agents

Two pieces of tooling teach coding agents how to build with xUI.

MCP server — @xui/mcp exposes every package's real API (selectors, signal inputs, variant axes, outputs), the design tokens, the docs and the Storybook examples as MCP tools. It extracts them from the library sources, so every package is covered and the answers match the installed version.

{
  "mcpServers": {
    "xui": { "command": "npx", "args": ["-y", "@xui/mcp"] }
  }
}

In this repository .mcp.json already points at dist/libs/mcp/src/server.js — run pnpm nx build mcp once so it exists.

Skill — skills/xui is the procedural knowledge: the three-layer architecture, discovery through the MCP server, composition and styling rules, theming, the generators, and the conventions for authoring a package inside the monorepo. .claude/skills/xui links to it for agents working in this repository.

Browser support

The browsers Angular itself supports — see the Angular browser support policy.

Development

The workspace is Nx + pnpm.

pnpm install
pnpm start                     # documentation site on :4200
pnpm storybook                 # component gallery on :4400
pnpm nx serve admin            # the example admin application
pnpm test                      # unit tests
pnpm nx test-storybook ui-storybook   # render every story in headless Chromium
pnpm build                     # build every package

Commits follow Conventional Commits and are linted — the release is cut from them. See docs/releasing.md for how a version is published, apps/ui-storybook/README.md before writing stories, and apps/app/README.md for the documentation site, whose component pages are generated from those same stories, and apps/admin/README.md for the example admin application — a full app built from these packages, which is the fastest way to see how they fit together.

Contributing

Bugs and ideas are welcome in issues. For a change of any size, open an issue first so the API can be agreed before the code exists.

License

See LICENSE.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme