Introduction
Beans is a React UI kit built on Base UI and styled with plain, modern CSS. It stays as close as it can to the HTML and CSS web standards, so what you copy into your project is code you can read, own and change.
What Beans is
Base UI provides the behavior: keyboard handling, focus management, ARIA and state. Beans provides the look, as a small set of tokens and one stylesheet per component. You copy the parts you need into your project and they become yours. There is no package to keep up to date.
What makes it different
- Vanilla CSS, no Tailwind. No utility classes in the markup, no CSS-in-JS, no preprocessor. Stylesheets use cascade layers, custom properties, nesting, container queries and
light-dark(), all of which browsers support natively. - BEM class names. Every component is a block with elements and modifiers, such as
.switch__thumb. Selectors stay at one class of specificity, so overriding a style never needs a fight. - State lives in attributes. Hover, focus, disabled, checked and invalid are styled from native and ARIA attributes and Base UI's
data-*attributes, not from extra classes you toggle in JavaScript. - Standards first. Semantic elements, a real
outlinefor focus, hover styles only where hover exists, reduced motion respected at the root. When the platform does something, Beans uses it.
Where to go next
- Quick start: copy Beans into your project.
- Foundations: colors, type, dimensions and icons.
- Components: start with Button.