My Chakra Components

Written by Chris Tham. Mostly inspired by the design of MerakiUI, but rewritten in Chakra-UI.

Use the switch on the top right to toggle between Light and Dark modes.

The source code for these components are available on GitHub in the chakra-components repository.

Header Image

Static Components

Static components have a fixed design. Change the component by editing it directly.


Headers are prominent sections at the beginning of the web page.


Sections are parts of the web page with a specific purpose and design.


Card components are typically used to display blog articles, products, or any information that is repeated across the page.


Forms allow user input via controls.


Footers are displayed at the bottom of every page.

Flexible Components

Flexible components change their design based on props supplied with the component.


The FlexHeader component has different customisable looks based on optional props.


FlexNavbar allows a customised navbar to be displayed with title, menu, optional logo and optional children in various positions, and can be fixed to the top of the screen.


FlexCard allows a customised card to be displayed with title, optional badges, images and children. The image can be on top, middle, or bottom.