Limitations#limitations
Blenx UI makes specific technology choices that come with important constraints. Review these before adopting the library.
Monorepo Not Supported for Consumers#monorepo-not-supported-for-consumers
The shadcn registry model copies source files directly into your project. The copied files use import aliases (@/components, @/lib, etc.) that assume a flat project structure.
If you are using a monorepo (Turborepo, Nx, Rush, pnpm workspaces), the installed component files and their relative imports may not resolve correctly across package boundaries. Each consuming application must independently configure its own alias resolution and Stylex plugin.
Recommendation: Install components into a single application package, not into a shared UI package within your monorepo.
Stylex Build Requirement#stylex-build-requirement
Stylex is a build-time CSS-in-JS solution. Every consumer project must:
- Install and configure the Stylex bundler plugin (@stylexjs/unplugin)
- Use a supported bundler: Vite, Next.js, Webpack, or ESBuild
- NOT use CSS-in-JS solutions that conflict with atomic class extraction (e.g., styled-components, Emotion)
Without proper Stylex configuration, components will render without styles.
Base UI#base-ui
Blenx UI depends on@base-ui/react APIs. The library is tested against Base UI React ^1.5.0. Upgrading Base UI may break component behavior. If you need a newer Base UI version, test all components thoroughly.
No Tailwind CSS Support#no-tailwind-css-support
This project deliberately chose Stylex over Tailwind CSS. The registry components ship with their own Stylex styles. If your project uses Tailwind, the two can coexist, but components will use Stylex classes, not Tailwind utilities. You cannot override component styles with className — use the style prop instead.
Phosphor Icons#phosphor-icons
The library uses @phosphor-icons/react for all iconography. If you prefer a different icon set, you will need to replace icon imports in the installed component source files manually.
Framework Compatibility#framework-compatibility
Components are built with React 19+ and are not tested with:
- Vue, Svelte, Solid, or other frameworks
- Older React versions <19>
CSS Custom Properties Theming#css-custom-properties-theming
Theme tokens are implemented as Stylex CSS variables. While this enables efficient light/dark mode switching, it means theme customization is limited to CSS variable overrides. You cannot use JavaScript-level theme switching without updating component source code.
/* Override theme tokens in your CSS */ :root { --primary: #your-color; --background: #your-bg; }
By default, defineVars will create unique, hashed variable names. To create variables with custom names use a key that starts with --. These will generate CSS custom properties with the provided name instead of generating a globally unique name.
import * as stylex from '@stylexjs/stylex'; export const colors = stylex.defineVars({ accent: 'blue', line: 'gray', '--background': 'black', });