Skip to Content

Build faster with Premium Chakra UI Components 💎

Learn more
Sponsor

Showcase

Meet Websites Built with Chakra UI

Chakra Templates

https://chakra-templates.dev

Choc UI

https://choc-ui.com/

OnlySetups

https://onlysetups.vercel.app/

TwitterFOMO.dev

https://twitterfomo.dev

Dokz

https://dokz.vercel.app/docs

Opensource.builders

https://opensource.builders

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/

thirdweb

https://thirdweb.com/

Top.gg

https://top.gg/

Octoclairvoyant

https://octoclairvoyant.vercel.app/

Roadster

https://r0adster.live

Chakra UI Pro

https://pro.chakra-ui.com

Snappify

https://snappify.io/

MockRocket

https://mockrocket.io/

Saas UI

https://saas-ui.dev

Polygon

https://pre-alpha.polygon.am/

Polygon

https://polygon.am/

Dev Resources

https://devresourc.es

Horizon UI

https://horizon-ui.com/horizon-ui-chakra/

Pesabooks

https://pesabooks.com/

Portion Monitor

https://portionmonitor.com/

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/

Klerye

https://www.klerye.com/

Confused's Site

https://confused.studio

TRIGO's Site

https://trigodev.com

Hari Kotha's Site

https://harikotha.netlify.app/

Beema Finance

https://beema.finance

wattanx's Site

https://wattanx.dev/

Gurudutt Perichetla's Website

https://www.guruduttperi.com/

Rakhi Boxes

https://rakhiboxes.com

Bobobox Mandalika Campsite

https://bobobox.co.id/campsite/mandalika/

SURE Trust

https://suretrustforruralyouth.com/

June

https://june.so

inspektre

https://inspektre.io

CeloPunk Auction

https://celopunk-auction.vercel.app/

Gio Gold

https://www.giogold.com/

Sharehouse

https://sharehouse.app

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

create-chakra-icons

https://chakra-icons.com

react-spreadsheet-import

https://ugnissoftware.github.io/react-spreadsheet-import/iframe.html?id=react-spreadsheet-import--basic&args=&viewMode=story

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

How to Set Up Chakra UI with Next JS by creating a Hero component

https://creativedesignsguru.com/chakra-ui-next-js/

Choosing the right component library for your design system: MUI vs Chakra

https://engineering.udacity.com/choosing-the-right-component-library-for-your-design-system-mui-vs-chakra-45c4c949d150

I have created Web Gallery app using Reactjs , WebRTC and Chakra UI

https://dev.to/harshmangalam/i-have-created-web-gallery-app-using-reactjs-webrtc-and-chakra-ui-5cfn

Track user location coordinates realtime using geolocation api, nextjs , nodejs and socket.io

https://dev.to/harshmangalam/track-user-location-coordinates-realtime-using-geolocation-api-nextjs-nodejs-and-socket-io-2nf3

Setup Nextjs , Apollo client and Chakra UI for your upcomming projects

https://dev.to/harshmangalam/setup-nextjs-apollo-client-and-chakra-ui-for-your-upcomming-projects-10ja

Image Uploading using golang and react

https://dev.to/harshmangalam/image-upload-using-golang-and-react-29n1

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