Installation

Install with your favorite package manager.

pnpm install @umami/react-zen

Setup

Zen offers two setup options depending on whether your project uses Tailwind CSS.

Option A: With Tailwind CSS (Recommended)

If your project uses Tailwind CSS v4, use the preset for the best experience with smaller bundle sizes.

1. Configure Tailwind

Add the preset to your tailwind.config.ts and include the package in your content paths:

import zenPreset from '@umami/react-zen/tailwind-preset';
 
export default {
  presets: [zenPreset],
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/@umami/react-zen/dist/**/*.{js,mjs}',
  ],
};

2. Import styles

Import the minimal stylesheet which includes theme CSS variables and component animations:

import '@umami/react-zen/styles.css';

Option B: Without Tailwind CSS

If your project doesn’t use Tailwind, import the full stylesheet which includes all necessary utility classes:

import '@umami/react-zen/styles.full.css';

This is a self-contained CSS file with no additional configuration needed.

Add ZenProvider

Wrap your application with ZenProvider to enable theming and toast notifications.

import { ZenProvider } from '@umami/react-zen';
 
export default function App({ children }) {
  return (
    <ZenProvider>
      {children}
    </ZenProvider>
  );
}

ZenProvider accepts the following props:

Use components

import { Button } from '@umami/react-zen';
 
export function Component() {
  return <Button variant="primary">Button</Button>;
}