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 color/typography engine — install them alongside @udixio/ui-angular. Theming is framework-agnostic: the same generator the React package uses, no Angular-specific runtime.

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, and @udixio/ui-react merely re-exports it. 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: `<lib-button label="Filled" variant="filled" />`,
})
export class AppComponent {}

Live theme changes

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

Changing colors at runtime is another matter: there’s no Angular equivalent of React’s ThemeProvider yet. To build a live theme switcher, drive loader() yourself and inject the CSS it returns.

Next steps