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?

We created Zen with strong focus on the developer experience. The goal of this project is to deliver a foundation for building consistent, maintainable, and accessible user interfaces.

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. Additionally, breakpoints are handled natively so you can create responsive layouts by just passing props to your components.

No CSS required

You shouldn't have to write any custom CSS. Zen makes extensive use of CSS variables that you can modify to adjust the design to your needs. Layout components, such as Flexbox and Grid, allow you to compose almost any UI. Still, all components can be styled through the standard className and style props if needed.

Comprehensive components

Components automatically handle all design and layout. All design customizations can be done via props instead of manipulating CSS. This simplifies your workflow to just composing tags and passing props.

<Box padding="6" borderSize="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.