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>;
}