🧘
FrontendCSS

React Zen

by umami-software

React Zen is a Frontend skill for Claude Code, published by umami-software in react-zen.

58 stars8 forkson umami-software/react-zenAdded 2026/07/16Repository updated 2026/03/16
Install in seconds
Install React Zen
Copy React Zen into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.
terminal
npx degit https://github.com/umami-software/react-zen ~/.claude/skills/react-zen

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/umami-software/react-zen.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file
SKILL.md in umami-software/react-zen
Installs to
~/.claude/skills/react-zen
Collection
The only skill cataloged from this repository
Category
Frontend732 skills

What React Zen does

A props-driven React component library for building polished interfaces without writing HTML, CSS, or utility classes.

React Zen is cataloged under Frontend on DirSkills.

Documentation

README

SKILL.md - Using @umami/react-zen

This guide covers how to use the zen component library in your React applications.

Installation

pnpm add @umami/react-zen

Import the stylesheet in your app entry point:

import '@umami/react-zen/styles.css';

Setup

Wrap your app with ZenProvider:

import { ZenProvider } from '@umami/react-zen';

function App() {
  return (
    <ZenProvider theme="light" palette="neutral">
      {children}
    </ZenProvider>
  );
}

Provider Options

This is the opening of the README. Read the full README on GitHub.

Frequently asked about React Zen

  • How does React Zen compare to other Frontend skills?

    React Zen ranks #698 by stars among the 732 Frontend skills in this catalog. The most-starred ones next to it are Angular Developer, Android Clean Architecture and Accessibility. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of React Zen against them. Open each page to compare what they document and how they install.