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

Primitives with Base UI#primitives-with-base-ui

Blenx UI is built on Base UI React (@base-ui/react), a headless component library from the creators of Material UI. Base UI provides unstyled, accessible primitives that handle behavior, keyboard navigation, focus management, and ARIA attributes.

Each Blenx UI component wraps a Base UI primitive with Stylex styling. This separation keeps the behavioral logic framework-agnostic while allowing full control over visual presentation.

Component Architecture#component-architecture


// Base UI handles behavior and accessibility
import { useRender } from "@base-ui/react/use-render";

// Stylex handles visual styling
import * as stylex from "@stylexjs/stylex";

export function Button({ render, ...props }) {
  return useRender({
    defaultTagName: "button",
    props: stylex.props(buttonStyles.base, props),
    render,
  });
}

Key Primitives Used#key-primitives-used

Dialog

@base-ui/react/dialog

Popover

@base-ui/react/popover

Select, Menu, Combobox, Autocomplete

various Base UI modules

Field, Input, Switch, Toggle

form primitives

ScrollArea, Tabs, Separator, Avatar

layout and media

useRender, mergeProps

composition utilities

Extending with render#extending-with-render

Every component supports a render prop that lets you override the rendered HTML element. This makes the library highly composable:


// Render Button as a link
<Button render={<a href="/page" />}>Go</Button>

// Compose Dialog close as a Button
<DialogPrimitive.Close render={<Button size="small" />}>
  <XIcon />
</DialogPrimitive.Close>