Skip to Content

Build faster with Premium Chakra UI Components 💎

Learn more
Sponsor

Showcase

Meet Websites Built with Chakra UI

Chakra UI Pro

https://pro.chakra-ui.com

Chakra Templates

https://chakra-templates.dev

Choc UI

https://choc-ui.tech/

OnlySetups

https://onlysetups.vercel.app/

TwitterFOMO.dev

https://twitterfomo.dev

Dokz

https://dokz.vercel.app/docs

Opensource.builders

https://opensource.builders

Snappify

https://snappify.io/

Purity UI Dashboard

https://www.creative-tim.com/product/purity-ui-dashboard

Chakra UI's Design vs Dev Challenges

https://www.youtube.com/playlist?list=PLLh_woCGjyGqed2oBdr7K0r7HcS6X4DCH

Polygon

https://polygon.am

UI Foundations

https://www.uifoundations.com/

DevKit

https://www.devkit.one/

React Python IDE

https://react-python-ide.vercel.app/

Markdown Notes

https://markdown-notes.netlify.app/

WeWork4Days

https://www.wework4days.com/

Rich Haines's Website

https://richardhaines.dev/

Daniel Wirtz's Personal site

https://danielwirtz.com

Nirmalya Ghosh's Site

https://nirmalyaghosh.com

Laura Beatris's Site

https://laurabeatris.com

SurabayaJS's Site

https://surabayajs.org

Lazar Nikolov's Site

https://nikolovlazar.com

Bloomberg Global Coal Countdown

https://bloombergcoalcountdown.com/

Chakra+Formik Integration Experiment

https://github.com/with-heart/chakra-formik-experiment/

Next-mdx-boilerplate

https://github.com/whoisryosuke/next-mdx-boilerplate

Start-ui

https://start-ui.vercel.app

React-hook-form-generator

https://github.com/FionnCasey/react-hook-form-generator

Bison

https://github.com/echobind/bisonapp

Fire Hydrant Design System

https://firehydrant.github.io/design-system/

Chakra Figma UI Kit

https://www.figma.com/community/file/971408767069651759

Chakra Play

https://chakra-play.tk/

Themera

https://themera.vercel.app/

OpenChakra

https://openchakra.app/

Nextchakra-starter

https://nextarter-chakra.sznm.dev/

Frontity-chakra-ui-theme

https://githubbox.com/chakra-ui/frontity-chakra-ui-theme

Chakra-ui-autocomplete

https://koolamusic.github.io/chakra-ui-autocomplete/

Chakra-ui-navbar

https://www.raptis.wtf/blog/create-a-navbar-with-chakra-ui-react/

Chakra-ui-markdown-renderer

https://github.com/mustaphaturhan/chakra-ui-markdown-renderer

Chakra-next

https://github.com/47ng/chakra-next

chakra-ui-steps

https://github.com/jeanverster/chakra-ui-steps

Formik-chakra-ui

https://github.com/kgnugur/formik-chakra-ui

Choc Autocomplete

https://githubbox.com/anubra266/choc-autocomplete/tree/main/demo

create-chakra-icons

https://github.com/kodingdotninja/create-chakra-icons

Chakra Datepicker

https://uselessdev-datepicker.netlify.app

HyperTheme Editor

https://www.hyperthe.me/

Chakra Capsize

https://githubbox.com/ceteio/chakra-capsize/tree/main/example

How ChakraUI complements your existing web development skills

https://dominik.sumer.dev/blog/chakra-complements-webdevs

Accessibility on-demand with Chakra-ui and focus-visible

https://medium.com/@keeganfamouss/accessibility-on-demand-with-chakra-ui-and-focus-visible-19413b1bc6f9

Build a Landing Page with Chakra UI

https://raptis.wtf/blog/build-a-landing-page-with-chakra-ui-part-1/

Customisations with Chakra UI

https://www.easyreact.com/articles/chakra-ui-customisations

Chakra UI and React-Hook-Form – How to Build Beautiful Forms

https://www.freecodecamp.org/news/how-to-use-react-hook-form-with-chakra-ui/

Truncating Text using Chakra UI

https://dev.to/estheragbaje/how-to-truncate-text-using-chakra-ui-4mpj

Getting Started with Chakra UI

https://youtu.be/wI2vqXsjsIo

The Future of Chakra UI (with Segun Adebayo & Lee Robinson)

https://www.youtube.com/watch?v=I5xEc9t-HZg&t=1182s

Building an Absence Tracker with Blitz JS and Chakra UI (Series)

https://youtu.be/bJmFwle8Ax0

How to use Chakra UI with Next.js and React

https://youtube.com/watch?v=ubB5l-HVPgY&feature=share

Customise your theme and components

https://youtube.com/watch?v=1J8dUyeUWO4&feature=share

Learn Chakra UI by building a Todo Application with Local Storage, Dark Mode enabled.

https://youtube.com/watch?v=QVnkGqEsbK0&feature=share

Design Workflow with Chakra UI and Figma

https://youtu.be/Gm7qHn9Y_Ro

Connect with the community

Feel free to ask questions, report issues, and meet new people.

Join the #Chakra Discord!

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel