Chakra Templates

Production-ready Chakra UI Templates for developers

A growing collection of hand-crafted Chakra UI templates ready to drop into your React project.

Getting started in 3 easy steps

Find your template

Every template is embedded within an iframe on the page, so you can easily check what they look like and test the responsive behaviour.

Copy the code

Just click the code tab to see the actual source code of the template. Copy and paste it into your project and your are ready to go!

Enjoy your free time

Your just saved yourself a bunch of time not building the same stuff over and over again. Enjoy your free time!

We're open source

And you can become a part of it. If you’re interested in contributing visit our GitHub repository and take a peek at the Template Development project. Those are pre-designed templates waiting for you!

GitHub Stars

Templates

10+

Contributors

.css-eknyg7{color:#48BB78;position:relative;z-index:10;}.css-eknyg7::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:30%;background:#C6F6D5;z-index:-1;}Chakra Templates

.css-eknyg7{color:#48BB78;position:relative;z-index:10;}.css-eknyg7::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:30%;background:#C6F6D5;z-index:-1;}Production-ready Chakra UI Templates for developers

Getting started in .css-eknyg7{color:#48BB78;position:relative;z-index:10;}.css-eknyg7::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:30%;background:#C6F6D5;z-index:-1;}3 easy steps

We're .css-eknyg7{color:#48BB78;position:relative;z-index:10;}.css-eknyg7::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:30%;background:#C6F6D5;z-index:-1;}open source

Chakra Templates

Production-ready Chakra UI Templates for developers

Getting started in 3 easy steps

We're open source