Chakra UI

According to theChakra UI website,

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

Choc UI

According to theChoc UI website,

Choc UI is a set of accessible and reusable components that are commonly used in web applications.

SoChoc UI is basically a collection of reusable components, built on theChakra UI library.

It's safe to sayChoc UI is to theChakra UI library asTailwind UI is toTailwind CSS.

It's in active developmenton Github, built onNextJS and is hosted onVercel.

It Presently consists a lot of useful and beautiful components.

The Site's sidebar even shows what component are under development.

Oh! and don't worry it also has light mode.

So Every Component on the site has 5 options.

1. Show/Hide Code

This toggles the code for the component.Fun fact It's editable. And allChakra UI Components, Icons are automatically imported behind the scenes. As well as all Icons in theReact Icons Library.

2. Copy Code

You know what that means.😉

3. Open Demo in New Tab

It basically gives you a full page preview of the component in a new tab where you can still copy component's code, toggle the theme mode, or just go home.

4. Open in Codesandbox

It opens components' code onCodesandbox.

Couldn't I just edit the code in the site's provided code editor? Well not,if you wanted to test the code with some other library, e.g.react-table

NB:

• The Codesandbox opened is a completely setup React and Chakra UI environment.
• The sandbox is generated on the fly. They wouldn't prebuild a sandbox for all their components.

5. Reset Component Code.

Use this if you want the code editor to reset to The original component's code.

Long story short. Save your designs some time, Star and contribute to this projecton Github.