chrome:seo.title.page

docs:getting-started.section.installation

getting-started-doc:lead.installation

getting-started-doc:paragraph.peer-angular

1

getting-started-doc:pipeline.install.title

pnpm add @xngui/core @xngui/styles …

2

getting-started-doc:pipeline.bootstrap.title

provideX() in app.config.ts

3

getting-started-doc:pipeline.styles.title

@import '@xngui/styles';

4

getting-started-doc:pipeline.component.title

<x-button> + flat imports

terminal

pnpm add @xngui/core @xngui/styles @xngui/components/button

getting-started-doc:data.req.providex
getting-started-doc:data.necessity.required
getting-started-doc:data.req.providex-note
getting-started-doc:data.req.styles-import
getting-started-doc:data.necessity.required
getting-started-doc:data.req.styles-import-note
getting-started-doc:data.req.zoneless
getting-started-doc:data.necessity.recommended
getting-started-doc:data.req.zoneless-note
getting-started-doc:data.req.i18n-json
getting-started-doc:data.necessity.conditional
getting-started-doc:data.req.i18n-json-note
getting-started-doc:data.req.icon-font
getting-started-doc:data.necessity.conditional
getting-started-doc:data.req.icon-font-note
getting-started-doc:data.req.theme-services
getting-started-doc:data.necessity.optional
getting-started-doc:data.req.theme-services-note
getting-started-doc:data.req.custom-palette
getting-started-doc:data.necessity.optional
getting-started-doc:data.req.custom-palette-note
getting-started-doc:data.req.app-translations
getting-started-doc:data.necessity.optional
getting-started-doc:data.req.app-translations-note

docs:getting-started.section.app-bootstrap

getting-started-doc:lead.bootstrap

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',      },    }),  ],};

getting-started-doc:data.stat.size: md
getting-started-doc:data.stat.density: standard
getting-started-doc:data.stat.validate-on: touched
getting-started-doc:data.stat.ripple: true

docs:getting-started.section.styles-theme

getting-started-doc:lead.styles

styles.css

@import '@xngui/styles';@import '@xngui/icons/lucide';

theme.ts

import { XPaletteService, XThemeService } from '@xngui/theme';inject(XThemeService).setMode('dark');inject(XPaletteService).setPalette('ocean');

palettes.ts

import { provideXPalettes } from '@xngui/theme';provideXPalettes([  {    id: 'brand',    label: 'Brand',    description: 'Company colors.',    icon: '🎨',    tokens: { 'x-primary-500': 'oklch(0.55 0.14 250)' },  },]);

docs:getting-started.section.first-component

getting-started-doc:lead.first-component

app.ts

import { Component } from '@angular/core';import { XButton } from '@xngui/components/button';import { XIcon } from '@xngui/icons';@Component({  selector: 'app-root',  imports: [XButton, XIcon],  template: `    <x-button variant="primary">      <x-icon name="star" xStart >      Get started    <x-button>  `,})export class App {}

docs:getting-started.section.icons

getting-started-doc:lead.icons

toolbar.html

import 'xngui/icons/lucide';<x-icon pack="lucide" name="star" /><x-icon pack="phosphor" name="heart" iconStyle="regular" />

docs:getting-started.section.i18n

getting-started-doc:lead.i18n

getting-started-doc:paragraph.i18n-when

getting-started-doc:paragraph.i18n-assets-intro

getting-started-doc:path.project-json.title

getting-started-doc:path.project-json.tagline

project.json

"assets": [  {    "glob": "**/*",    "input": "apps/my-app/public"  },  {  "glob": "*.json",  "input": "node_modules/@xngui/i18n/locales",  "output": "i18n"}]

getting-started-doc:path.angular-json.title

getting-started-doc:path.angular-json.tagline

angular.json

"assets": [  "src/favicon.ico",  "src/assets",  {    "glob": "*.json",    "input": "node_modules/@xngui/i18n/locales",    "output": "/i18n"  }]

getting-started-doc:paragraph.i18n-serve-path

getting-started-doc:paragraph.i18n-bootstrap

app.config.ts

import { provideX } from '@xngui/core/config';import { createFetchI18nLoader } from '@xngui/core/i18n';provideX({  i18n: {    languages: ['en', 'fa', 'ar'],    defaultLocale: 'en',    fallbackLocale: 'en',    packs: ['x'],    loader: createFetchI18nLoader({ baseUrl: '/i18n' }),  },});

app-packs.ts

provideX({  i18n: {    languages: ['en', 'fa'],    defaultLocale: 'en',    fallbackLocale: 'en',    packs: ['x', 'app'],    defaultPack: 'app',    loader: createFetchI18nLoader({ baseUrl: '/i18n' }),  },});

app-translations.ts

import { provideXTranslations } from '@xngui/core/i18n';provideXTranslations({  'app.title': { en: 'My app', fa: 'برنامه من' },});

getting-started-doc:paragraph.i18n-app-packs getting-started-doc:paragraph.i18n-eager

getting-started-doc:paragraph.i18n-templates

page.html

<button type="button">{{ 'x:alert.dismiss' | xTranslate }}</button><h1>{{ 'app.title' | xTranslate }}</h1>

docs:getting-started.section.flat-imports

getting-started-doc:lead.imports

getting-started-doc:rule.do.labelgetting-started-doc:rule.do.body
getting-started-doc:rule.dont.label
getting-started-doc:rule.dont.body

XButton@xngui/components/button
XInput@xngui/components/input
XForm@xngui/components/form
XIcon@xngui/icons
XDataSource@xngui/cdk/datasource
XSize@xngui/core
provideX@xngui/core/config
XTranslatePipe@xngui/core/i18n
XThemeService@xngui/theme
XPaletteService@xngui/theme
provideXPalettes@xngui/theme
configureXComponent@xngui/testing

docs:getting-started.section.ai-agents

getting-started-doc:lead.ai-agents

mcp.json

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

terminal

npx -y @xngui/skills

docs:getting-started.section.next-steps

getting-started-doc:lead.next-steps

docs:getting-started.data.forms-guide

docs:getting-started.data.signal-forms-x-form-and-x-form-field-composition

docs:getting-started.data.styles

docs:getting-started.data.css-primitives-semantic-roles-and-states

docs:getting-started.data.themes

docs:getting-started.data.runtime-appearance-palettes-and-presets

docs:getting-started.data.core-types

docs:getting-started.data.shared-unions-events-and-app-bootstrap

docs:getting-started.data.icons

docs:getting-started.data.xicon-font-awesome-setup-and-sizing

docs:getting-started.data.testing

docs:getting-started.data.harnesses-specs-and-configurexcomponent

docs:getting-started.data.mcp

docs:getting-started.data.structured-catalog-for-cursor-claude-and-vscode

docs:getting-started.data.skills

docs:getting-started.data.install-generate-review-design-and-a11y

docs:getting-started.data.theme-builder

docs:getting-started.data.tune-tokens-and-export-a-css-preset

docs:getting-started.data.components

docs:getting-started.data.interactive-demos-for-every-ui-primitive

generated:catalog.entry.getting-started.title

docs:getting-started.section.installation

getting-started-doc:heading.adoption-path

getting-started-doc:heading.kit

getting-started-doc:heading.setup-checklist

docs:getting-started.section.app-bootstrap

docs:getting-started.heading.providex

getting-started-doc:heading.config-defaults

docs:getting-started.section.styles-theme

docs:getting-started.heading.global-stylesheet

docs:getting-started.heading.dark-mode-palettes