Blenx UI — Modern React Component Library powered by StyleX & Base UI

Blenx UI uses Stylex as its styling engine. Stylex is a CSS-in-JS library developed by Meta that compiles to atomic CSS at build time. Unlike runtime CSS-in-JS solutions, Stylex produces tiny, deterministic stylesheets with zero runtime overhead.

This means all styling is resolved at build time, resulting in minimal bundle size and excellent runtime performance. The tradeoff is that Stylex requires bundler plugin configuration and does not support CSS Cascade layers or traditional stylesheet features.

Design Tokens#design-tokens

The design system is driven by CSS variables defined via stylex.defineVars:


export const theme = stylex.defineVars({
  primary: "",
  background: "",
  surface: "",
  border: "",
  contentPrimary: "",
  sentimentNegative: "",
  focusRing: "",
  shadowSm: "",
  // ...
});

Theme tokens support automatic light/dark mode via media queries. See Theming for details on customizing them.

Style Composition#style-composition

Components compose styles using stylex.props(), which merges multiple style definitions and applies them as atomic classes:


const resolved = stylex.props(
  buttonStyles.base,
  variantStyles[variant],
  sizeStyles[size],
  style,          // overrides via prop
);

Key Constraints#key-constraints

Stylex does not support @media queries in stylex.create — use stylex.defineVars with media query overrides.
Dynamic styles must be defined statically and toggled via conditionals — not created inline.
CSS custom properties are the primary theming mechanism.
Bundler plugin ( @stylexjs/unplugin) is required at build time.
No runtime style injection — all styles are extracted during build.