bx

Introduction

bext-ui — the design system for bext + PRISM. Beautifully designed components you copy into your app as PRISM functions. Open Source. Open Code.

bext/ui is a collection of beautifully-designed, accessible components and a code-distribution platform for bext + PRISM. It is a faithful port of shadcn/ui — same look, same philosophy — rebuilt around PRISM's string-returning components and static islands.

This is not a component library you install as a dependency. It is how you build your own. Pick the components you need, copy the code into your project, and customize every line.

Open Code

bext/ui hands you the actual component source. In practice that means:

  • Full transparency. You see exactly how each component is built — it's just a function that returns a string of HTML.
  • Easy customization. Change a class, a token, or the markup directly. No wrapper props to fight, no !important.
  • No version lock. The code lives in your repo. Upgrades are diffs you choose to apply.

How does it work?

Every component ships in three parts:

  1. Markup — a function in src/components/ui/<name>.tsx that returns a string of HTML styled with Tailwind utility classes.
  2. Tokens — CSS variables (the same --background / --primary set as shadcn) that flip between light and dark.
  3. Behaviour — for interactive components, a shared /islands/ui.js reacts to data-ui hooks (tabs, accordion, dialogs, …).

FAQ

Do I need React?

No. PRISM renders these components to HTML on the server. There's no client-side React, no hydration cost — just one small vanilla island for interactivity.

Can I use it with an existing bext site?

Yes. Copy the components you need into src/components/ui/, drop the token stylesheet into your layout, and include the island. Nothing else changes.