DEV Community

Cover image for Introducing Frontity Chakra Theme
Reyes Martínez for Frontity Framework

Posted on • Updated on • Originally published at frontity.org

Introducing Frontity Chakra Theme

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.

Homepage view in Frontity Chakra Theme

Homepage view in Frontity Chakra Theme.

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.

Post view in the Frontity Chakra Theme

Post view with progress indicator.

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:

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.

Top comments (5)

Collapse
 
skyandsand profile image
Chris C

Hi! I noticed you're in Madrid. Do you have any connections in Valencia or Malaga? Visiting in a couple of months!

Collapse
 
r_martinezduque profile image
Reyes Martínez

Hi Chris! Thanks for reaching out! Some members of our team are based in Madrid but unfortunately we don't have any connections in Valencia or Málaga. Is there anything we can help with? :)

Collapse
 
skyandsand profile image
Chris C

Just curious to meet up on a solo trip your way. I will be flying out in March 🙂 take care

Thread Thread
 
r_martinezduque profile image
Reyes Martínez

What a pity! If you come to Madrid by any chance, let us know. Have a nice trip! 🙂

Collapse
 
moatazabdalmageed profile image
Moataz Mohammady

I just installed it here frontity-playground-rouge.vercel.app/

it is amazing But I think need to check special characters in headings