Zen

Zen is the design system and React component collection used by Umami. It contains the design tokens, layout primitives, controls, and interface patterns used across Umami products.

The components follow shadcn conventions, use Base UI primitives for interactive behavior, and are styled with Tailwind CSS and CSS custom properties.

Documentation · Component source

Contents

• Design tokens for color, typography, spacing, borders, and shadows
• Layout and typography primitives
• Form controls and interactive components
• Reusable interface patterns from Umami products

Installation

pnpm install @umami/react-zen

With Tailwind CSS

For projects using Tailwind CSS v4, add the Zen preset and include the package in the 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}',
  ],
};

Import the theme variables and component animations:

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

Without Tailwind CSS

Import the full stylesheet:

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

Usage

Wrap the application with ZenProvider, then import components from the package:

import { Button, ZenProvider } from '@umami/react-zen';

export function App() {
  return (
    <ZenProvider>
      <Button variant="primary">Save</Button>
    </ZenProvider>
  );
}

See the documentation for component APIs, design tokens, and patterns.

Development

This repository is a pnpm and Turborepo monorepo:

• packages/react-zen contains the component package
• apps/docs contains the documentation site

Install dependencies:

pnpm install

Run the workspace in development:

pnpm dev

Build all packages and apps:

pnpm build

Lint the workspace:

pnpm lint

To run a command for one workspace:

pnpm --filter @umami/react-zen build
pnpm --filter react-zen-docs dev

The documentation development server runs at http://localhost:9001.

License

MIT