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 consumed as a git submodule. Add the submodule, register the workspaces, wire up PandaCSS — that's it. Prefer to see it in a working repo? Browse the demo — a minimal Remix + Vite + Cloudflare Pages app with these three steps already applied on the feat/bennie-ui-integration branch.
# bennie-ui is a Bun workspace, not a published npm package git submodule add [email protected]:bennie-ui/bennie-ui.git packages/bennie-ui git submodule update --init --recursive
{
"workspaces": ["packages/bennie-ui/**"],
"dependencies": {
"@bennie-ui/button": "workspace:*",
"@bennie-ui/card": "workspace:*",
"@bennie-ui/icons": "workspace:*"
}
}
// then: bun install// panda.config.ts
export default defineConfig({
preflight: true,
include: [
"./app/**/*.{ts,tsx}",
"./packages/bennie-ui/components/**/*.{ts,tsx}",
"./packages/bennie-ui/libraries/**/*.{ts,tsx}",
],
outdir: "styled-system",
});
// App.tsx
import { Button } from "@bennie-ui/button";
<Button variant="primary" size="medium">Submit</Button>