Awesome Open Source
Awesome Open Source


Mandala UI

Maintainability Test Coverage CircleCI

Mandala is a UI Component Library built with React and Tachyons, a tiny (30kb GZIP) Declarative CSS library


Check out our Interactive Docs before you decide if this package is right for you.

The only real dependencies to use Mandala are React, and and they are Peer Dependencies, so you are responsible for installing them in your build

You can add the CDN version of tachyons to the head of your project to easily get started.

<link rel="stylesheet" href="[email protected]/css/tachyons.min.css"/>

If you have a CSS build pipeline in your React project, you can also

npm install tachyons


Each of the Mandala components are published to NPM separately as scoped packages.

npm install @mandala-ui/progress-bar

then import the component

import ProgressBar from '@mandala-ui/progress-bar'

Either way you will need Tachyons installed


Mandala is set up to easily get you contributing new components.

It uses React Storybook as a development environment.

So to get started, run:

npm run generate

And follow the prompts. This will scaffold a new component and generate the Jest test files, as well as a Storybook Story for interactive documentation.

Storybook stories use mostly these two addons for development.

npm start

Go to http://localhost:6006/

and find your component which will render empty, now you can start composing CSS classes.

A PR of a new Component requires 3 things:

  • A README that completely documents the props and their usage
  • Interactive documentation in the form of a Storybook Story
  • 100% Jest Test Coverage.


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,158,774
Reactjs (175,483
Css (162,562
Component Library (1,360
Tachyons (434
Functional Css (114