Material Design 3 goes dynamic

A dynamic Material 3 React Library

Dynamic theming with ThemeProvider and config logic in under 5 minutes. No rigid build steps. Fully compatible with Tailwind CSS.

Get Started Explore Components

20+ Components

100% Tailwind Native

MD3 Specifications

Experience True Theming

Interact with the ecosystem. Our design tokens inject instantly into the DOM, changing your UI live.

Couleur de baseGénère automatiquement toute la palette

Mode Sombre

9:41

📶🔋

Chat

1

Team Update #1

10:41 AM

Lorem ipsum dolor sit amet, consectetur adipiscing.

2

Team Update #2

10:42 AM

Lorem ipsum dolor sit amet, consectetur adipiscing.

3

Team Update #3

10:43 AM

Lorem ipsum dolor sit amet, consectetur adipiscing.

4

Team Update #4

10:44 AM

Lorem ipsum dolor sit amet, consectetur adipiscing.

5

Team Update #5

10:45 AM

Lorem ipsum dolor sit amet, consectetur adipiscing.

MD3 Architecture

Built systematically according to the latest MD3 specifications. Full support for tonal palettes, standard surface hierarchies, and precise contrast ratios.

Dynamic Runtime Injection

Drop in your source hex color and ThemeProvider calculates and injects the CSS custom properties instantly. Zero pre-compilation required.

Tailwind Native

Integrates flawlessly with Tailwind CSS. We expose a Tailwind plugin that merges the semantic MD3 tokens to your utility classes natively.

Less Verbose, More Semantic

Udixio UI abstracts complex utility combinations and dark mode variants into semantic, role-based MD3 tokens.

👆 Inspecting the Feature Cards above

Default Tailwind Verbose

<div class="bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-3xl p-8 flex flex-col gap-6">
  <div class="w-12 h-12 rounded-2xl bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 flex items-center justify-center">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 -960 960 960">
      <path d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-85 32-158t87.5-127q55.5-54 130-84.5T489-880q79 0 150 26.5T763.5-780q53.5 47 85 111.5T880-527q0..." />
    </svg>
  </div>
  <div class="space-y-3">
    <h3 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
      MD3 Architecture
    </h3>
    <p class="text-lg text-zinc-500 dark:text-zinc-400">
      Built systematically according to the latest MD3 specifications.
    </p>
  </div>
</div>

Udixio UI Semantic

import { Card, Icon } from "@udixio/ui";
import { iPalette } from "@udixio/icons-rounded-400/palette";

<Card variant="outlined" className="p-8 flex flex-col gap-6">
  <div className="w-12 h-12 rounded-2xl bg-primary-container text-on-primary-container flex items-center justify-center">
    <Icon icon={iPalette} className="text-2xl" />
  </div>
  <div className="space-y-3">
    <h3 className="text-headline-small font-bold text-on-surface">
      MD3 Architecture
    </h3>
    <p className="text-body-large text-on-surface-variant">
      Built systematically according to the latest MD3 specifications.
    </p>
  </div>
</Card>

Built-in Dark Mode: No need for dark: prefixes. Colors adapt automatically based on the theme.

Start building premium interfaces.

Install Udixio UI today and supercharge your next React application with a world-class design system.

Read the Installation Guide