beepboopbitbbb-design
React components, themes, and design foundations I can reuse and make my own in each app.
I built BBB to give my apps a consistent starting point. Gallery brings the components, themes, and interface patterns together in one place. The installer copies the React, TypeScript, and CSS into an app so I can adapt the source to what it needs.
A shared starting point for my interfaces.
Explore it in Gallery
Try working components and patterns, inspect their code and APIs, and compare themes before using them in an app.
Keep the source in your app
Copy complete component bundles with their styles and supporting files. The CLI preserves existing edits and records the source release.
Build on shared foundations
Reuse design tokens, light and dark themes, density settings, and React Aria interaction behavior. Customize the brand through shared tokens and provider settings.
Install
Run from your React app’s root to initialize BBB using the deployed registry. These commands become available when the npm package is published; publication is currently pending.
npx @beepboopbit/ui@latest initNext step
Add the components you want. Follow the guide to wrap your app in ThemeProvider and use the copied source.
npx @beepboopbit/ui@latest add button text-field dialogBefore you start
Node.js 24 · npm · React 19.2.x · TypeScript 6.x
The Gallery and source registry are public; npm CLI publication is pending. The npx installer uses the deployed registry by default. Supported apps use React and React DOM 19.2.x, TypeScript 6.x, Vite, and plain CSS. Copied components and dependency updates become part of your app.
What it looks like to use
# From your React app’s root, after npm publication
npx @beepboopbit/ui@latest init --dry-run
npx @beepboopbit/ui@latest init
npx @beepboopbit/ui@latest add button text-field dialog