Type-safe React components, styled at build time.
Bennie-UI is a modern React component library built with PandaCSS. Variant-based, fully typed, and zero-runtime — styles are extracted at build, so there's nothing to ship at runtime.
bun add @bennie-ui/button
Everything is a variant, a token, and a type.
Each component follows the same API — a semantic variant, a size, and an escape-hatch css prop. No surprises, no runtime.
PandaCSS integration
Type-safe styling with static CSS extraction. Styles are compiled at build time for optimal performance.
Variant-based design
Consistent design tokens across every component. Reach for variant="primary" instead of ad-hoc styles.
Fully typed
Complete TypeScript support with IntelliSense for every style property. Catch styling errors at compile time.
Tree-shakeable
Import only what you need. Each component is its own package, so your bundle stays lean and focused.
Accessible
Built with accessibility in mind — semantic markup, keyboard support, and sensible focus states by default.
Zero runtime
No CSS-in-JS runtime overhead. Minimal dependencies keep the library lean and the output predictable.
The building blocks, live.
Primitives and composites pulled straight from the library. Hover, click, toggle — these are the real components and their real APIs.
Up and running in three steps.
Bennie-UI is a Bun workspace. Add a package, wire up PandaCSS, and import what you need.
# add only the components you use bun add @bennie-ui/button @bennie-ui/inputs @bennie-ui/toast
export default defineConfig({
preflight: true,
include: ["./src/**/*.{ts,tsx}", "./node_modules/@bennie-ui/**/*.{ts,tsx}"],
outdir: "styled-system",
})import { Button } from "@bennie-ui/button";
import { Input } from "@bennie-ui/inputs";
export function App() {
return (
<>
<Input label="Email" withClearMark />
<Button variant="primary">Submit</Button>
</>
);
}Build your next interface with bennie-ui.
Type-safe, zero-runtime, and composable. Open source and in active development.