Angular

Installation

npm install @udixio/ui-angular @udixio/theme @udixio/tailwind
npm install -D tailwindcss @tailwindcss/postcss postcss

@udixio/theme and @udixio/tailwind are the shared color and typography engine — install them alongside @udixio/ui-angular. For live theme changes, Angular also provides a native ThemeProvider component.

Angular compiles CSS through PostCSS, so enable the Tailwind plugin with a .postcssrc.json at your project root:

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

1. Define your theme

Create theme.config.ts at your project root:

// theme.config.ts
import { defineConfig } from '@udixio/tailwind';

export default defineConfig({
  sourceColor: '#6750A4',
  outFile: 'src/udixio.generated.css',
});

sourceColor is the only required option — defineConfig wires TailwindPlugin and FontPlugin for you, and takes their options flat. outFile is where the generated stylesheet is written; the generator also adds it to a sibling .gitignore, since it’s a build artifact.

This is the same defineConfig React uses: it lives in @udixio/tailwind, the lowest package that sees both plugins. Nothing here is framework-specific.

Every other option (custom palettes, sub-themes, fonts, dark mode, contrast) is covered in Theme — Configuration.

2. Wire the build step

The stylesheet must be regenerated whenever theme.config.ts changes. Angular’s application builder doesn’t let you inject bundler plugins, so drive the generator from npm scripts instead — @udixio/theme ships the udixio-theme CLI for exactly this. In package.json:

{
  "scripts": {
    "theme": "udixio-theme build",
    "theme:watch": "udixio-theme build --watch",
    "start": "concurrently \"npm:theme:watch\" \"ng serve\"",
    "build": "npm run theme && ng build"
  }
}

concurrently (or any equivalent) is only needed to run the watcher next to ng serve — you can just as well keep npm run theme:watch open in a second terminal and leave start as plain ng serve.

The CLI takes -c, --config <path> (default ./theme.config) and -w, --watch. If you do use a custom builder that accepts bundler plugins, @udixio/theme also exports esbuildPlugin, webpackPlugin, rollupPlugin and vitePlugin — see the plugin system.

3. Import the generated CSS

Add to your global styles file (src/styles.css, referenced from angular.json):

@import 'tailwindcss';
@import './udixio.generated.css';

/* lets Tailwind see the utility classes used inside the component library */
@source '../node_modules/@udixio/ui-angular';
@source '../node_modules/@udixio/core';

Both @source lines are required: components are split between @udixio/ui-angular and the framework-agnostic @udixio/core, and Tailwind only emits classes it can find in scanned files.

4. Render a component

Components are standalone — import and use them directly, no provider needed:

import { Component } from '@angular/core';
import { Button } from '@udixio/ui-angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [Button],
  template: `<udx-button label="Filled" variant="filled" />`,
})
export class AppComponent {}

Styling a component

Use the native class attribute or [class] binding on any udx-* element: the string is routed to the component’s root element and merged with its own classes through tailwind-merge, so your utilities win on conflicts.

<udx-button class="mt-4 w-full" label="Save" />
<udx-button [class]="dense() ? 'py-1' : 'py-3'" label="Save" />

To style an internal element, bind [classes] to an object keyed by element name:

<udx-text-field
  label="Code"
  [classes]="{ input: 'uppercase', label: 'font-bold' }"
/>

Most components render their host with display: contents, so [class.x] and [ngClass] — which Angular always applies to the host — have no visible effect on them. Put conditional classes in [class] or [classes] instead.

Live theme changes

The generated stylesheet covers a fixed light/dark theme through the darkMode and darkSelector options — see Theme — Dark mode.

For live changes, wrap the content that uses dynamic theme variables in ThemeProvider and update its config input when your theme changes:

import { ThemeProvider } from '@udixio/ui-angular';

<udx-theme-provider [config]="themeConfig" (load)="onThemeLoaded($event)">
  <main class="dynamic">
    <udx-button label="Themed action" />
  </main>
</udx-theme-provider>

The provider regenerates the stylesheet when the config changes. It accepts initialCss for server-rendered CSS and emits load after each successful generation. The .dynamic selector must contain the elements that should receive live updates.

For a server-rendered initial stylesheet, generateThemeCss is also exported from @udixio/ui-angular:

import { generateThemeCss } from '@udixio/ui-angular';

const initialCss = await generateThemeCss(themeConfig);

Next steps