React

Installation

npm install @udixio/ui-react @udixio/theme @udixio/tailwind
npm install -D tailwindcss @tailwindcss/vite

@udixio/theme and @udixio/tailwind are the color/typography engine @udixio/ui-react builds on — install them alongside it. tailwindcss and its Vite integration compile the tokens into utility classes.

1. Define your theme

Create theme.config.ts at your project root:

// theme.config.ts
import { defineConfig } from '@udixio/ui-react';

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

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

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

2. Wire the build plugin

vitePlugin is what actually runs the generator. It loads theme.config.ts at the start of every build, and in dev it watches the file: change your source color and the stylesheet is regenerated and the page reloaded.

// vite.config.ts
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';
import { vitePlugin } from '@udixio/theme';

export default defineConfig({
  plugins: [tailwindcss(), vitePlugin()],
});

It takes two options, both optional:

@udixio/theme exports webpackPlugin, esbuildPlugin and rollupPlugin with the same signature (see the plugin system). If your toolchain doesn’t accept a bundler plugin, run the generator from an npm script instead — that’s the approach the Angular guide uses.

3. Import the generated CSS

/* src/global.css */
@import 'tailwindcss';
@import './udixio.generated.css';

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

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

4. Render a component

Add dynamic to an element wrapping your app, then mount ThemeProvider once near the root:

import { ThemeProvider, Button } from '@udixio/ui-react';
import themeConfig from '../theme.config';

export default function App() {
  return (
    <div className="dynamic">
      <ThemeProvider config={themeConfig} />
      <Button label="Filled" variant="filled" />
    </div>
  );
}

The generated stylesheet has two layers: a static one Tailwind compiles at build time, and a dynamic one scoped to .dynamic that ThemeProvider recomputes at runtime. Without the class, the dynamic layer never applies — so a runtime theme switcher would have no visible effect.

If your theme never changes at runtime, you can drop ThemeProvider and keep the static layer alone. See Theme — Dark mode for both setups.

Next steps