The shadcn/ui Experience for StyleX: Why I Built Blenx

For the last few years, I've worked with a variety of UI libraries, component systems, and design system approaches.

No matter the stack, every product eventually reaches the same stage:

You need a design system.

Not just a collection of buttons and inputs, but a foundation that can scale across teams, products, and years of development.

The problem is that most solutions force a trade-off.

You either:

Adopt a component library and sacrifice flexibility.
Build everything from scratch and sacrifice time.

I wanted something in the middle.

The developer experience of:

npx shadcn@latest add button

with complete ownership of the resulting code.

No black boxes.

No lock-in.

No styling constraints.

That idea eventually became Blenx.

What is Blenx?

Blenx is a registry-first component platform for React applications.

Instead of installing a large component library, developers add only the components they need directly into their codebase.

Every component is fully owned, customizable, and designed to evolve with your application.

Built with StyleX, Base UI, React, and TypeScript, Blenx combines accessible primitives, modern styling, and source-code ownership into a single developer experience.

This means:

No vendor lock-in
Full customization
Components you actually own
Better long-term maintainability
Familiar installation workflows

⭐ GitHub: https://github.com/blenx-dev/blenx-ui

🚀 Live Preview: https://blenx-ui.vercel.app/

Why Not Just Use shadcn/ui?

shadcn/ui is fantastic.

However, it is heavily optimized around Tailwind CSS.

Many teams (including myself) today are exploring alternatives such as:

StyleX
Vanilla Extract
CSS Modules
Panda CSS

I wanted a solution designed specifically for StyleX from day one.

Not an adaptation.

Not a wrapper.

A native experience.

Registry-First Architecture

One of the goals of Blenx is to separate component distribution from component implementation.

Every component exists as source code inside a registry.

Developers can browse components, preview them, and install them directly into their projects.

The registry becomes the source of truth.

This approach provides several advantages:

Components remain fully editable.
Teams can fork and customize implementations.
Versioning becomes easier.
Design systems can evolve without forcing upgrades.

Building on Base UI

Accessibility is difficult.

Keyboard navigation, focus management, screen readers, and interaction patterns all require careful implementation.

Rather than reinventing these primitives, Blenx is built on top of Base UI.

Base UI provides accessible foundations while allowing complete control over styling and composition.

This combination of:

Base UI for behavior
StyleX for styling
Registry distribution for ownership

forms the foundation of Blenx.

Available Components

The initial component set focuses on foundational building blocks:

Button
Input
Card
Dialog
Drawer
Popover
Tooltip
Avatar
Tabs
Stack
Layout primitives

Additional components, templates, and application building blocks will be added over time, such as:

Data Tables
Command Menus
Calendars
Charts
Application Templates

What Can You Build with Blenx?

Blenx is designed for developers and teams who want the flexibility of owning their components without sacrificing development speed.

Whether you're building:

SaaS dashboards
Internal tools
Marketing websites
AI applications
Design systems for multiple products

Blenx provides a foundation that can grow with your application.

Because components are added directly to your codebase, you're free to customize, extend, and adapt them to your needs. There are no black boxes, no styling constraints, and no dependency on a specific design language.

The goal isn't to provide a fixed UI library.

The goal is to provide a starting point that developers fully control.

Blenx is built for teams that want the speed of a component library without giving up ownership of their code.

Take the components you need, make them yours, and build on top of a foundation you control.

Get Started