Today, we are really excited to introduce Frontity Chakra Theme, a new Frontity theme powered by the amazing Chakra UI React Component Library.
⚡ You can see the Frontity Chakra Theme demo here.
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
connectfunction and how it interferes in the
restspread of component props. But I solved this challenge easily and had a great experience!
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?
You can install the Frontity Chakra Theme like other published packages in Node using
To do so, run this command in your terminal:
npm install frontity-chakra-theme
frontity-chakra-theme to your
👉 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.
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.