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.
Static components have a fixed design. Change the component by editing it directly.
Headers | Headers are prominent sections at the beginning of the web page. |
Sections | Sections are parts of the web page with a specific purpose and design. |
Cards | Card components are typically used to display blog articles, products, or any information that is repeated across the page. |
Forms | Forms allow user input via controls. |
Footers | Footers are displayed at the bottom of every page. |
Flexible components change their design based on props supplied with the component.
FlexHeader | The FlexHeader component has different customisable looks based on optional props. |
FlexNavbar | 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 | FlexCard allows a customised card to be displayed with title, optional badges, images and children. The image can be on top, middle, or bottom. |