Introduction

Zen is a props-driven React component library built for speed. Created by the team at Umami , it lets you build polished interfaces without writing HTML, CSS, or even thinking about Tailwind classes.

The components are built on top of React Aria  for accessibility and Tailwind CSS  for styling, but you never have to touch either directly. Just compose components and pass props.

Source code is available on GitHub .

Why Zen?

Building UI is slow. You have to think about markup structure, CSS organization, responsive breakpoints, accessibility, and design consistency, all before you can ship a feature.

Zen eliminates that friction. Instead of assembling Tailwind classes or writing custom CSS, you work with primitive components that handle everything through props:

<Box padding="12" border borderRadius="lg" shadow="lg">
  <Column alignItems="center" gap="6">
    <Heading size="3xl">Welcome</Heading>
    <Text color="muted" weight="medium">
      This is the Zen way.
    </Text>
    <Button variant="primary">Enter</Button>
  </Column>
</Box>

No className. No CSS files. No memorizing utility classes. Just components and props.

Design out of the box

Zen ships with a complete design system covering colors, fonts, spacing, shadows, and borders.

Everything works together. The spacing scale is consistent. The colors have proper contrast. Dark mode just works. You get a professional-looking UI without making design decisions.

Need to customize? Override the CSS variables and the entire system adapts.

Primitive components

Zen provides building blocks, not pre-built widgets. Components like Box, Row, Column, and Grid let you compose any layout through props:

• Spacing: padding, margin, gap
• Layout: alignItems, justifyContent, direction
• Responsive: {{ base: 'column', md: 'row' }}
• Visual: border, borderRadius, shadow

This is faster than writing Tailwind because you’re working at a higher level of abstraction. You don’t assemble classes; you describe what you want.

Accessibility included

Every interactive component is keyboard-navigable and screen reader-friendly, powered by React Aria . Focus management, ARIA attributes, and interaction patterns are handled automatically.

You don’t configure accessibility. You just use the components.

Props over classes

Zen inverts the typical workflow. Instead of starting with markup and adding styles, you compose semantic components that already know how to render themselves:

The result: less code, fewer decisions, faster shipping.