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