Introduction

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

The components are built on top of React Aria, providing out-of-the-box accessibility handling, and styled using our custom design system that leverages CSS variables.

Source code is available on GitHub.

Why Zen?

Zen is built with a strong focus on the developer experience. We want to make UI development faster, more predictable, and less error-prone. Zen components allow you to apply design and layout changes completely through props.

Here is an example:

<Box padding="6" borderWidth="1" 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>

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.

Our goal is to provide a foundation for building consistent, maintainable, and accessible user interfaces with minimal effort.

Opinionated design

Out of the box, Zen provides predefined styles that cover colors, fonts, spacing, shadows, and borders, as well as components that deal specifically with typography and layout.

At the same time, Zen remains flexible. You can override styles using CSS variables or extend the design system through the provided utility props.

No 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. Breakpoints are handled natively, so you can create responsive layouts without having to write custom media queries.

However, if you ever need full control, you can still style components using the standard className and style props.

Comprehensive 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.