Getting started
JZB UI distributes source through a shadcn registry. Pick a component and install it into your own React project.
01 / Prepare your project
You’ll need React 19, Tailwind CSS v4, and a working shadcn configuration. Initialize with Base UI. For a new shadcn setup:
1pnpm dlx shadcn@latest init --base base02 / Add a component
1pnpm dlx shadcn@latest add https://jzbui.com/r/button.jsonThe CLI copies the button and class-name helper into your configured directories. It also installs the theme file and required dependencies.
JZB UI uses Base UI primitives. Your components.json aliases determine the installation paths; custom aliases such as ~/ work too. Blocks include their component dependencies:
1pnpm dlx shadcn@latest add https://jzbui.com/r/preferences.json03 / Connect the theme
The theme lands at styles/jzb-theme.css, relative to your project root. Import it after Tailwind in your global CSS, adjusting this path as needed:
12@import "tailwindcss";@import "../styles/jzb-theme.css";Use the dark class on your root element for dark mode. Change the semantic CSS variables to give every installed component your own visual direction.
04 / Own the code
Installed files belong to your project. Registry updates are deliberate: review changes before replacing customized components. The base components use React and UI dependencies; Effect is used only by this site’s deployment infrastructure.
Shape, shadows, and motion are Tailwind utilities in each installed file; the shared theme holds tokens only. Pass className for a local override or edit the source:
123<DialogContent className="rounded-lg shadow-none duration-200 data-ending-style:duration-150"> {/* Your content */}</DialogContent>05 / Keep the design consistent
Every component and block includes .agents/skills/jzb-ui/SKILL.md. It teaches your coding agent the same tokens, proportions, component states, and motion used here. Ask your agent to use $jzb-ui when building or extending an interface.
A portable design checker and its TypeScript/PostCSS development dependencies arrive with it. Add the check alongside your existing lint command, adjusting the paths to your UI and CSS:
1node .agents/skills/jzb-ui/scripts/check-design.mjs src/components styles/jzb-theme.cssThe check catches raw colors, unbounded or layout transitions, and incompatible UI imports. It leaves your lint configuration intact. Visual quality, contrast, keyboard behavior, and reduced motion still need browser review. Review skill updates before replacing customized guidance.