Getting Started

Introduction

Zen is a modern, minimalist React component library created by Umami.

The components are built on top of React Aria primitives, which provide out-of-the-box accessibility handling. They are styled with plain CSS and CSS variables.

Source code is available on GitHub

Why Zen?

Zen is built with a strong focus on the developer experience, making UI development faster, more predictable, and less error-prone. Our goal is to provide a foundation for building consistent, maintainable, and accessible user interfaces with minimal effort.

Opinionated, Yet Flexible Design

Zen comes with a beautiful, consistent design system that eliminates decision fatigue. It provides predefined styles for colors, fonts, spacing, shadows, and borders, ensuring visual consistency across your project.

Breakpoints are handled natively, so you can create responsive layouts effortlessly by passing props to components—no need to write custom media queries.

At the same time, Zen remains flexible. You can override styles using CSS variables or extend the design system through the provided utility props. This strikes a balance between having a solid design foundation and allowing customization when needed.

Zero CSS Required

Writing custom CSS shouldn’t be a requirement for building beautiful and functional interfaces. Zen’s components are designed to work out of the box, leveraging CSS variables that you can tweak to match your design preferences.

For layout composition, Zen includes utility components like Flexbox and Grid, which let you structure your UI without diving into CSS files. However, if you ever need full control, you can still style components using the standard className and style props.

Comprehensive & Accessible Components

Zen takes care of the design, layout, and accessibility for you. Components automatically adjust to their context and support built-in accessibility features powered by React Aria. This means you get fully keyboard-navigable, screen reader-friendly UI elements without any extra work.

Instead of worrying about CSS rules or low-level behavior, you simply compose tags and pass props. Every component is designed to be self-contained, reducing complexity and making UI development more intuitive.

By using Zen, you can spend less time on styling and accessibility concerns and more time focusing on building great user experiences.

<Box padding="6" border borderRadius="3" shadow="3">
  <Flexbox direction="column" alignItems="center" gap="6">
    <Heading size="4">Welcome</Heading>
    <Text color="muted" weight="medium">
      This is the zen way.
    </Text>
    <Button variant="primary">Enter</Button>
  </Flexbox>
</Box>

Welcome

This is the zen way.

In this example we have:

A Box component that provides a styled container.
A Flexbox component that aligns the content and provides spacing.
A Text component that provides styled text.
A Button component for interactivity.

Installation