DEV Community

loading...
Cover image for Intro to Choc UI, a Chakra UI Component library.

Intro to Choc UI, a Chakra UI Component library.

anubra266 profile image Abraham Anuoluwapo Updated on ・2 min read

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.

Alt Text

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

Alt Text

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

Alt Text

So Every Component on the site has 5 options.

Alt Text

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.

Alt Text

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.

Alt Text

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.

Alt Text

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.

Discussion (4)

pic
Editor guide
Collapse
9mza profile image
9MZa

It's have vue version ?

Collapse
anubra266 profile image
Collapse
9mza profile image
9MZa

Sad

Collapse
_zoka profile image
Mahmoud Ibrahiam

Awesome, thanks for this creative work ♥️😎