chrome:seo.home-title

hero-stories:story.5.~~before~~after

landing:hero.window-title landing:hero.live

landing:hero.overview

85+landing:hero.stat.components

23landing:hero.stat.cdk

41landing:hero.stat.blocks

Elena Vasquez

Design systems lead

landing:hero.active

landing:hero.bundle-health

landing:hero.semantic-tokens

landing:token.primary
landing:token.secondary
landing:token.accent
landing:token.success
landing:token.warning
landing:token.danger
landing:token.info
landing:token.neutral
landing:token.background

Primary

Secondary

Accent

Success

Warning

Danger

Info

landing:trusted-by.label

landing:use-case.design-systems landing:use-case.admin-dashboards landing:use-case.saas-products landing:use-case.internal-tools landing:use-case.marketing-sites landing:use-case.enterprise-apps

landing:use-case.design-systems
landing:use-case.admin-dashboards
landing:use-case.saas-products
landing:use-case.internal-tools
landing:use-case.marketing-sites
landing:use-case.enterprise-apps

landing:section.features

landing:highlight.signals-first.title
landing:highlight.signals-first.description
landing:highlight.accessible-by-default.title
landing:highlight.accessible-by-default.description
landing:highlight.oklch-design-tokens.title
landing:highlight.oklch-design-tokens.description
landing:highlight.tree-shakeable.title
landing:highlight.tree-shakeable.description
landing:highlight.dark-mode.title
landing:highlight.dark-mode.description
landing:highlight.cdk-primitives.title
landing:highlight.cdk-primitives.description

landing:code-example.eyebrow

landing:code-example.title

landing:code-example.description

01 landing:code-example.step-install

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

02 landing:code-example.step-styles

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';

03 landing:code-example.step-config

app.config.ts

import { ApplicationConfig, provideZonelessChangeDetection } from '@angular/core';

import { provideRouter } from '@angular/router';

import { provideX } from '@xngui/core/config';

export const appConfig: ApplicationConfig = {

providers: [

provideZonelessChangeDetection(),

provideX({

config: {

size: 'md',

density: 'standard',

validateOn: 'touched',

}),

};

landing:dx.eyebrow

landing:dx.title

landing:dx.description

landing:dx.item-1.title

landing:dx.item-1.description

landing:dx.item-2.title

landing:dx.item-2.description

landing:dx.item-3.title

landing:dx.item-3.description

landing:dx.item-4.title

landing:dx.item-4.description

landing:section.showcase

showcase-mock:title.v2-4-shipped

showcase-mock:text.v2-4-separator-and-resizable-panels

showcase-mock:text.bio

showcase-mock:text.design-tokens

showcase-mock:text.angular

showcase-mock:label.a11y

98showcase-mock:label.lighthouse

85+showcase-mock:label.components

AAshowcase-mock:label.a11y

showcase-mock:text.component-coverageshowcase-mock:text.92

showcase-mock:text.docs-completenessshowcase-mock:text.78

showcase-mock:text.quick-actions

landing:apps.eyebrow

landing:apps.title

landing:apps.description

landing:design-system.eyebrow

landing:design-system.title

landing:design-system.description

landing:design-system.semantic-lead

landing:token.primary--x-primary
landing:token.secondary--x-secondary
landing:token.accent--x-accent
landing:token.success--x-success
landing:token.warning--x-warning
landing:token.danger--x-danger
landing:token.info--x-info
landing:token.neutral--x-neutral
landing:token.background--x-background

Primary

Secondary

Accent

Success

Warning

Danger

Info

xslanding:design-system.type-xslanding:design-system.type-sample
smlanding:design-system.type-smlanding:design-system.type-sample
baselanding:design-system.type-baselanding:design-system.type-sample
lglanding:design-system.type-lglanding:design-system.type-sample
xllanding:design-system.type-xllanding:design-system.type-sample
2xllanding:design-system.type-2xllanding:design-system.type-sample

landing:design-system.radius

smmdlgxlfull

landing:design-system.shadow

smmdlg

landing:performance.eyebrow

landing:performance.title

landing:performance.description

0
landing:metric.zone-overhead.label
landing:metric.zone-overhead.detail
OnPush
landing:metric.change-detection.label
landing:metric.change-detection.detail
< 8kb
landing:metric.per-entry.label
landing:metric.per-entry.detail
CSS
landing:metric.layout.label
landing:metric.layout.detail

landing:analytics.title

landing:analytics.metric.visitors12.4k +18%

landing:analytics.metric.conversion4.2% +0.8%

landing:analytics.metric.bounce-rate32% -4%

landing:analytics.metric.avg-session3m 12s +12%

landing:categories.title

landing:tools.eyebrow

landing:tools.title

landing:tools.description

landing:open-source.eyebrow

landing:open-source.title

landing:open-source.description

85+landing:stat.components
23landing:stat.cdk-utilities
41landing:stat.blocks
2landing:stat.tools

landing:open-source.cta landing:open-source.github

landing:testimonials.eyebrow

landing:testimonials.title

landing:value-prop.tree-shakeable-packages.quote

landing:final-cta.eyebrow

landing:section.final-cta

landing:final-cta.description

chrome:nav.get-started landing:documentation landing:hero.github

chrome:seo.home-title

landing:section.features

landing:highlight.signals-first.title

landing:highlight.accessible-by-default.title

landing:highlight.oklch-design-tokens.title

landing:highlight.tree-shakeable.title

landing:highlight.dark-mode.title

landing:highlight.cdk-primitives.title

landing:code-example.title

landing:dx.title

landing:section.showcase

showcase-mock:title.v2-4-shipped

landing:apps.title

landing:app.files.title

landing:app.notes.title

landing:app.music.title

landing:app.movies.title

landing:app.tasks.title

landing:design-system.title

landing:performance.title

landing:metric.zone-overhead.label

landing:metric.change-detection.label

landing:metric.per-entry.label

landing:metric.layout.label

landing:analytics.title

landing:categories.title

landing:category.actions.title 6

landing:category.forms.title 21

landing:category.navigation.title 9

landing:category.overlays.title 9

landing:category.feedback.title 3

landing:category.data-display.title 15

landing:category.media.title 5

landing:category.layout.title 6

landing:category.typography.title 11

landing:category.tools.title 2

landing:category.cdk.title 23

landing:tools.title

landing:tool.mcp-server.title

landing:tool.agent-skills.title

landing:tool.theme-builder.title

landing:tool.config-builder.title

landing:open-source.title

landing:testimonials.title

landing:section.final-cta