Skip to content
Xng UI
Docs CDK Components Blocks Tools Contribute About
NewAngular 22+ · Signals-first components

Xng UI

OneSmall hugepieces componentthat APIwork together

Get startedDocumentation

Built for teams shipping

Design systems Admin dashboards SaaS products Internal tools Marketing sites Enterprise apps
  • Design systems
  • Admin dashboards
  • SaaS products
  • Internal tools
  • Marketing sites
  • Enterprise apps

Built for product teams

  • Signals-first

    Fine-grained reactivity with Angular signals and modern control flow.

  • Accessible by default

    WCAG AA, ARIA, and keyboard patterns built into every primitive.

  • oklch design tokens

    Semantic roles from @xngui/styles, light and dark.

  • Tree-shakeable

    Per-component entry points — import only what each route needs.

  • Dark mode

    XThemeService toggles .dark — tokens remap, no duplicate styles.

  • CDK primitives

    Datasource, overlay, and focus utilities for headless patterns.

Get started

Install in minutes, compose for years

Secondary entry points keep bundles lean — add only the components you need.

terminal
# install peer deps (Angular 20+)
pnpm add @xngui/core
pnpm add @xngui/styles @xngui/theme
# add components as needed
pnpm add @xngui/components/button
pnpm add @xngui/components/select
pnpm add @xngui/components/card
styles.css
/* Foundation: primitives, semantic light/dark, more ...*/
@import '@xngui/styles';
 
/* Optional reset and utilities */
@import '@xngui/styles/base';
/* optional our tailwind tokens */
@import '@xngui/styles/tailwind';
/* optional icon pack — lucide, tabler, phosphor, material-symbols, fluent, fontawesome */
@import '@xngui/icons/lucide';
 

Try it live

v2.4 shipped

v2.4 — separator and resizable panels.

Elena Vasquez

Active

Staff Engineer · Design ops

elena@acme.design

Composable primitives with semantic tokens — accessible, themeable product UI out of the box.

Design tokens Angular A11y
98Lighthouse
84+Components
AAA11y
Q3 goals
Component coverage92%
Docs completeness78%
Quick actions

Design system

Tokens that travel from Figma to production

oklch primitives, semantic roles, and component-local variables — one source of truth across light, dark, and brand palettes.

Semantic roles

Toggle appearance from the navbar — every role remaps from @xngui/styles without duplicate component CSS.

  • Primary--x-primary
  • Secondary--x-secondary
  • Accent--x-accent
  • Success--x-success
  • Warning--x-warning
  • Danger--x-danger
  • Info--x-info
  • Neutral--x-neutral
  • Background--x-background
Primary Secondary Accent Success Warning Danger Info
Typography scale
  • xsCaption and meta labelsThe quick brown fox
  • smSecondary body copyThe quick brown fox
  • baseDefault reading sizeThe quick brown fox
  • lgLead paragraphsThe quick brown fox
  • xlSection headingsThe quick brown fox
  • 2xlDisplay titlesThe quick brown fox
Shape & elevation
Radius
smmdlgxlfull
Shadow
smmdlg

Performance

Fast by default

Lean bundles, predictable rendering, and CSS-first layout — without sacrificing accessibility or theming.

  • 0

    Zone overhead

    Zoneless-ready — signals drive updates, not patch cycles.

  • OnPush

    Change detection

    Default since Angular 21 — fine-grained and predictable.

  • < 8kb

    Per entry

    Button alone, gzip — import only what each route needs.

  • CSS

    Layout

    No JS layout engine — structure and motion from tokens.

Actionable insights

Visitors12.4k +18%
Conversion4.2% +0.8%
Bounce rate32% -4%
Avg. session3m 12s +12%
TrafficLast {range}

84+ components

Tools

Built for agents and IDEs

MCP, editor extensions, and live theme tooling — ship faster with structured access to the catalog.

Open source

MIT licensed. Community driven.

Open issues, submit requests, and contribute components back to the ecosystem.

  • 84Components
  • 23CDK utilities
  • MITLicense
  • AngularFramework

Submit a request

Start building

Get startedDocumentation