Installation

Add the package to a React app or a WordPress plugin, and render your first component.

Requirements

React 19 and Tailwind CSS 4.1 or later. The package's own dependencies install with it; React, Radix, the icons and Tailwind CSS are peers, so your app keeps one copy of each. Three components need one more package, which you add only if you use them: Chart needs recharts, Calendar react-day-picker and Toast sonner. Their pages say so under Import.

Set up

Create the app, then add the package, its peers and Tailwind CSS:

pnpm create vite my-app --template react-ts --no-interactive
cd my-app
pnpm add @booleanpress/ui radix-ui lucide-react
pnpm add -D tailwindcss @tailwindcss/vite

Add Tailwind CSS to vite.config.ts:

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import tailwindcss from "@tailwindcss/vite"

export default defineConfig({
  plugins: [react(), tailwindcss()],
})

Replace src/index.css with Tailwind CSS and the theme. The theme brings the colour tokens, the motion and the overlay rules, and tells Tailwind CSS to find the package's classes:

@import "tailwindcss";
@import "@booleanpress/ui/theme.css";

Render the provider once, around the app, in src/main.tsx:

import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import { BooleanUIProvider } from "@booleanpress/ui/provider"
import App from "./App"
import "./index.css"

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <BooleanUIProvider>
      <App />
    </BooleanUIProvider>
  </StrictMode>,
)

Your first component

Import each component from its own entry. Replace src/App.tsx with a button that opens a dialog:

import { Button } from "@booleanpress/ui/button"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@booleanpress/ui/dialog"

export default function App() {
  return (
    <main className="p-8">
      <Dialog>
        <DialogTrigger asChild>
          <Button>Open dialog</Button>
        </DialogTrigger>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>It works</DialogTitle>
            <DialogDescription>Press Escape to close this dialog.</DialogDescription>
          </DialogHeader>
        </DialogContent>
      </Dialog>
    </main>
  )
}

Run pnpm dev and open the address it prints. The button opens the dialog, and Escape closes it.

AI assistants

The library has a plugin for AI coding assistants. Its seven skills set the package up, choose and compose components, theme them, check accessibility, upgrade between versions and audit a project. They read the Markdown documentation that ships inside the package, so the assistant works from the version you installed, offline. The repository is the plugin's marketplace.

claude plugin marketplace add booleanpress/ui
claude plugin install booleanpress-ui@booleanpress

Update it with claude plugin marketplace update booleanpress, then claude plugin update booleanpress-ui@booleanpress.