Styling and cascade layers

vael-ui ships in @layer ui-components. Unlayered CSS always wins over a layer regardless of specificity, so a plain, unlayered base reset silently overrides vael-ui internals. Fix: put your base styles in a layer too, ordered first.

Layer order

/* your app's main stylesheet, e.g. style.css */
@layer app-base, ui-components;

@layer app-base {
  * { margin: 0; box-sizing: border-box; }
  button, input, textarea, select { font: inherit; }
}

// main.ts
import './style.css'        // your base layer, loads first
import 'vael-ui/style.css'  // now sorts after app-base

Two files, that's it. Import order here only controls layer position, nothing else, an unlayered override anywhere always still wins regardless of load order.

Deliberately overriding one component (ui prop, a Tailwind utility) wants your rule to win, keep that CSS unlayered as it already is by default. See Using with Tailwind.

CSS variables

Every color, radius, shadow, and motion value in vael-ui reads from a CSS custom property. Override any of them in your own unlayered stylesheet:

/* your own global stylesheet, unlayered so it always wins */
:root {
  --ui-primary: #6366f1;
  --ui-radius: 6px;
}

ConfigProvider's theme prop covers primary, danger, and radius for dynamic, JS-driven theming. Everything else here is CSS-only.

Colors

Shape

Elevation & layering

Motion