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:
- Markup — a function in
src/components/ui/<name>.tsxthat returns a string of HTML styled with Tailwind utility classes. - Tokens — CSS variables (the same
--background/--primaryset as shadcn) that flip between light and dark. - Behaviour — for interactive components, a shared
/islands/ui.jsreacts todata-uihooks (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.
On This Page