Installation

Cladd is a regular npm package that drops into any React 19+ app. Pick the framework you're using to get a step-by-step guide, or jump to Manual for a plain React setup.

Choose your framework

The short version

If you've installed Tailwind v4 packages before, this is the whole story:

npm install @cladd-ui/react

Import the stylesheet after Tailwind, in the same CSS file:

@import 'tailwindcss';
@import '@cladd-ui/react/css';

Wrap your app in CladdProvider once, as high in the tree as possible:

import { CladdProvider } from '@cladd-ui/react';
 
export default function App({ children }) {
  return <CladdProvider>{children}</CladdProvider>;
}

That's it — every cladd component reads its theme, accent color, and overlay portals from this provider. The framework guides above just show where each of these three steps goes for your particular setup.

Requirements

• React 19+ — cladd uses the new ref-as-prop API and a few React 19 hooks. There's no plan to backport to React 18.
• Tailwind CSS v4 — cladd's styles are authored as @theme blocks and CSS layers; v3 won't pick them up. See the Tailwind v4 docs for framework-specific setup.
• A bundler that respects CSS import order. The cladd stylesheet must load after Tailwind so its @theme tokens layer on top.