General considerations

CSS-UI builds upon TailwindCSS v4 and provides a flexible way to style CSS components.

All components use design tokens for colors and geometry.

The design tokens are set using four groups of utility classes:

Modes

mode-auto | mode-light | mode-dark

Configures CSS properties for auto/light/dark mode.

Sizes

size-xs | size-sm | size-md | size-lg | size-xl | size-2xl

Sets the CSS properties for adjusting size of components.

Themes

theme-neutral | theme-primary | theme-secondary | theme-accent | theme-success | theme-warning | theme-error | theme-info

Sets the CSS properties for adjusting the color of components.

Variants

aspect: variant-aspect-default | variant-aspect-square

density: variant-density-default | variant-density-dense | variant-density-lax

depth: variant-depth-0 | variant-depth-1 | variant-depth-2 | variant-depth-3 | variant-depth-4 | variant-depth-5

shape: variant-shape-default | variant-shape-pill | variant-shape-sharp

style: variant-style-filled | variant-style-soft | variant-style-outlined | variant-style-ghost

Sets the CSS properties for adjusting the final aspect of components.

The effect of the utility classes is inherited based on the DOM structure, and the result of combining utility classes from different groups is cummulative.

The utility classes from groups Modes, Sizes, and Themes are designed to override each other using the normal CSS precedence rules.

The utility classes from group Variants have more freedom - they cand override each other or act in a cummulative way.

What is shown in this documentation is a sample set of utility classes, selected to showcase the power of the components library. They can be recreated and enhanced to fit your requirements.

Mode examples

Size examples

Inheritance and override examples

Variant examples