Introduction

Zen is Umami's design system and React component library. It brings together design tokens, layout primitives, and accessible controls for building consistent web interfaces.

Use Zen as the foundation for a complete interface or adopt individual pieces in your own application. This documentation covers installation, component APIs, and design tokens.

Source code is available on GitHub.

Implementation#

The current components follow shadcn conventions and use Base UI primitives for interactive behavior. Styling is implemented with Tailwind CSS and CSS custom properties.

What is included#

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

Basic usage#

After installing the package, wrap the application with ZenProvider and import the components you need.

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

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