Intro to Choc UI, a Chakra UI Component library.

Chakra UI

According to the Chakra 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 the Choc UI website,

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

So Choc UI is basically a collection of reusable components, built on the Chakra UI library.

It's safe to say Choc UI is to the Chakra UI library as Tailwind UI is to Tailwind CSS.

It's in active development on Github, built on NextJS and is hosted on Vercel.

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 all Chakra UI Components, Icons are automatically imported behind the scenes. As well as all Icons in the React 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 on Codesandbox.

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 project on Github.