Frontity is a free and open source framework for building headless WordPress sites using React. Check out the docs here.

Today, we are really excited to introduce Frontity Chakra Theme, a new Frontity theme powered by the amazing Chakra UI React Component Library.

The theme has been designed and developed by Segun Adebayo, creator of Chakra UI and author of the Frontity’s Twenty Twenty theme port.

⚡ You can see the Frontity Chakra Theme demo here.

Intro to Frontity Chakra Theme

According to Segun, the Frontity Chakra Theme has been designed with three principles in mind: to be simple, beautiful and pleasant to the eye.

Its goal is to demonstrate how easy it is to create more sophisticated themes with Frontity, and how to use React component libraries (like Chakra) with Frontity.

This pre-made theme is great for developers who are new to Frontity and want to get their site up and running quickly. But also for those who have a specific use-case in mind and prefer to use a theme as the base for their site instead of starting from scratch.

Although it can be adaptable to different websites, the Chakra Theme is best suited for blogs that make a heavy use of images to showcase their ideas or products. Mostly fashion, tourism, photography, design, etc.

Regarding the theme development, Segun highlighted that the overall experience with Frontity and Chakra UI was great.

The only challenge I had was with the connect function and how it interferes in the rest spread of component props. But I solved this challenge easily and had a great experience!

Theme Features

The theme comes with a handful of new, interesting features.

Theming: the theme uses Chakra’s theming functionality to provide colors to all components. All you need to do is to edit the colors in the frontity.settings.js file and your entire blog visuals will update.

Search: this theme has a full page search modal/popup to help visitors search the content of your blog.

Mobile Responsive: the Frontity Chakra theme is 100% mobile responsive and adapts to any screen size or resolution.

Progress Indicator: for each blog post, readers can see a progress indicator showing how far they’ve read.

Mobile Menu: the theme displays an elegant responsive menu on mobile to navigate the entire site.

Social Links: this theme's feature allows you to use social media links in your blog. In order to use it, you will only have to provide your social links in the frontity.settings.js file and they will automatically show up in your blog. Amazing, right?

Installation

You can install the Frontity Chakra Theme like other published packages in Node using npm.

To do so, run this command in your terminal:

npm install frontity-chakra-theme

Then add frontity-chakra-theme to your frontity.settings.js file.

👉 To learn more about the theme options, how to configure them, and see an example of usage, please refer to the README of the GitHub repository.

You can also follow this guide on how to install a new Frontity package.

Resources

Feel free to reach out in the community with any questions you might have about the Frontity Chakra Theme.

Here's some useful links:

• GitHub repo
• Live demo
• How to install a new Frontity package
• Best practices for sharing a Frontity project
• Frontity's step-by-step tutorial

Special thanks to Segun Adebayo for his work on this theme. 💙

Can't wait to see what you build with it!

This post was originally published at frontity.org/blog.