Zen is a props-driven React component library built for speed. Build polished interfaces without writing HTML, CSS, or thinking about Tailwind classes.
- Props over classes - Style through component props, not utility classes
- Design included - Complete design system out of the box with dark mode
- Accessible - Built on React Aria primitives
- Powered by Tailwind - Uses Tailwind CSS under the hood, but you never touch it
npm install @umami/react-zenimport '@umami/react-zen/styles.css';import { Box, Column, Heading, Text, Button } from '@umami/react-zen';
export default function Welcome() {
return (
<Box padding="6" border borderRadius="lg" shadow="lg">
<Column alignItems="center" gap="6">
<Heading size="3xl">Welcome</Heading>
<Text color="muted">This is the zen way.</Text>
<Button variant="primary">Enter</Button>
</Column>
</Box>
);
}No className. No CSS files. Just components and props.
Building UI is slow. You have to think about markup, CSS organization, responsive breakpoints, accessibility, and design consistency.
Zen eliminates that friction:
| Traditional approach | zen approach |
|---|---|
| Write HTML structure | Compose components |
| Add Tailwind classes | Pass props |
| Handle responsive manually | Use responsive objects |
| Configure accessibility | Already done |
MIT