Introducing Frontity Chakra Theme
Tags: react, wordpress, frontity, webdev
Published: 2020-01-30 18:14:31

---
title: Introducing Frontity Chakra Theme
published: true
description: We are excited to share with you the new, free Frontity theme powered by the amazing Chakra UI React Component Library: Frontity Chakra Theme. ✨
tags: react, wordpress, frontity, webdev
cover_image: https://wp.frontity.org/wp-content/uploads/2020/01/introducing-frontity-chakra-theme-02.png
canonical_url: https://frontity.org/blog/introducing-frontity-chakra-theme/
---

_[Frontity](https://frontity.org/?utm_source=dev.to&utm_medium=frontity-chakra-theme-post&utm_campaign=frontity-chakra-theme-release) is a free and open source framework for building headless WordPress sites using React. Check out the docs [here](https://docs.frontity.org/?utm_source=dev.to&utm_medium=frontity-chakra-theme-post&utm_campaign=frontity-chakra-theme-release)._

----

Today, we are really excited to introduce **Frontity Chakra Theme**, a new Frontity theme powered by the amazing [Chakra UI](https://chakra-ui.com/) React Component Library.

The theme has been designed and developed by [Segun Adebayo](https://twitter.com/thesegunadebayo), creator of Chakra UI and author of the [Frontity’s Twenty Twenty theme port](https://frontity.org/blog/introducing-twenty-twenty-frontity-theme/).

⚡ You can see the Frontity Chakra Theme demo [here](https://frontity-chakra.vercel.app/).

## 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.

<figure class="wp-block-image size-large">![Homepage view in Frontity Chakra Theme](https://i2.wp.com/wp.frontity.org/wp-content/uploads/2020/01/new-frontity-chakra-theme.png?fit=580%2C328&ssl=1)

<figcaption>Homepage view in Frontity Chakra Theme.</figcaption>

</figure>


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.

<figure class="wp-block-image size-large">![Post view in the Frontity Chakra Theme](https://i2.wp.com/wp.frontity.org/wp-content/uploads/2020/01/post-view-frontity-chakra-theme.png?fit=580%2C319&ssl=1)

<figcaption>Post view with progress indicator.</figcaption>

</figure>

**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](https://github.com/chakra-ui/frontity-chakra-ui-theme).

You can also follow this guide on [how to install a new Frontity package](https://docs.frontity.org/guides/install-a-new-package).

## Resources

Feel free to [reach out](https://community.frontity.org/) in the community with any questions you might have about the Frontity Chakra Theme.

Here's some useful links:

*   [GitHub repo](https://github.com/chakra-ui/frontity-chakra-ui-theme)
*   [Live demo](https://frontity-chakra.vercel.app/)
*   [How to install a new Frontity package](https://docs.frontity.org/guides/install-a-new-package)
*   [Best practices for sharing a Frontity project](https://docs.frontity.org/guides/how-to-share-a-frontity-project)
*   [Frontity's step-by-step tutorial](https://tutorial.frontity.org/)

**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](https://frontity.org/blog/introducing-frontity-chakra-theme/?utm_source=dev.to&utm_medium=frontity-chakra-theme-post&utm_campaign=frontity-chakra-theme-release)._