Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/chakra-ui/awesome-chakra-ui

A collection of Chakra UI-related awesomeness
https://github.com/chakra-ui/awesome-chakra-ui

List: awesome-chakra-ui

Last synced: about 1 month ago
JSON representation

A collection of Chakra UI-related awesomeness

Awesome Lists containing this project

README 

        
# Awesome Chakra UI



[![Awesome](https://awesome.re/badge.svg)](https://awesome.re)



A collection of Chakra UI-related awesomeness



[https://github.com/chakra-ui/chakra-ui](https://github.com/chakra-ui/chakra-ui)



## Contents



- [Awesome Chakra UI](#awesome-chakra-ui)

  - [Contents](#contents)

  - [Projects](#-projects)

  - [Websites](#%EF%B8%8F-websites)

  - [Libraries](#%EF%B8%8F-libraries)

  - [Tools](#%EF%B8%8F-tools)

  - [Articles](#-articles)

  - [Videos](#%EF%B8%8F-videos)

  - [Guides](#guides)

  - [Talks](#talks)

  - [Contribute](#contribute)



## 🔥 Projects



- [Chakra UI Time Scroller](https://www.npmjs.com/package/chakra-ui-time-scroller): This is a clean time picker/scroller built for javascript and typescript with chakra-ui.

- [Chakra UI Pro](https://pro.chakra-ui.com/): Beautiful and responsive React components to build your application or marketing pages quicker. Created by the makers of Chakra UI.

- [Chakra Templates](https://chakra-templates.dev/): A growing collection of hand-crafted & responsive Chakra UI templates ready to drop into your React project.

- [Choc UI](https://choc-ui.com/): A set of accessible and reusable components that are commonly used in web applications.

- [Cosmos Kit](https://cosmoskit.com/): Set up a modern Cosmos app by running one command, and instantly get a web3 project with Next.js and Chakra UI ready-to-go.

- [OnlySetups](https://github.com/wobsoriano/onlysetups): OnlyFans, but for pictures of desk setups.

- [Dokz](https://github.com/remorses/dokz): Effortless documentation with Next.js and MDX.

- [Opensource.builders](https://github.com/junaid33/opensource.builders): Opensource.builders is a website to find and request open-source alternatives to popular software you already use.

- [Snappify](https://snappify.io/): A code snippet creator.

- [Purity UI Dashboard](https://www.creative-tim.com/product/purity-ui-dashboard): a free dashboard built with Chakra UI.

- [Chakra UI's Design vs Dev Challenges](https://github.com/chakra-ui/design-vs-dev): the collection of Design vs. Dev Challenges.

- [UI Foundations](https://www.uifoundations.com/): A premium UI/UX design platform built using Chakra UI.

- [DevKit](https://www.devkit.one/): A PWA that houses a number of developer focussed 🧰 tools. Free and Open Source, built with NextJS, ⚡ Chakra UI and a number of smaller libraries, by [@AnishDe12020](https://twitter.com/AnishDe12020): and the 🧑‍🤝‍🧑 community.

- [React Python IDE](https://react-python-ide.vercel.app/): A Python IDE run in browser, built with ReactJS, 🔥 Chakra UI, skulpt and Xterm.js.

- [Markdown Notes](https://markdown-notes.netlify.app/): A fully responsive note-taking application in markdown language, built with Chakra UI, react-markdown and codemirror.

- [thirdweb](https://thirdweb.com/): A web3 platform that offers contracts, intuitive SDKs, a dashboard and widgets for developers.

- [Top.gg](https://top.gg/): The Best Discord Bots and Servers.

- [Octoclairvoyant](https://octoclairvoyant.vercel.app/): A webapp to compare GitHub changelogs across multiple releases. Made with Next.js and Chakra UI.

- [MockRocket](https://mockrocket.io/): Show off your app with jaw-dropping 3D mockups and product videos, right in your browser.

- [Saas UI](https://saas-ui.dev/): An advanced component library build for SaaS products.

- [Dev Resources](https://devresourc.es/): A collaborative list of resources for developers.

- [Horizon UI](https://github.com/horizon-ui/horizon-ui-chakra): Trendiest Open Source Admin Template based on Chakra UI!

- [Pesabooks](https://pesabooks.com/): A digital platform to save and invest together, with Crypto.

- [Portion Monitor](https://portionmonitor.com/): Record Daily Portion Intake, Set Limits, and View Reports.

- [TemplatesKart](https://templateskart.com/): Production-ready hand crafted beautiful Projects and Components list built on top of Chakra UI.

- [nextarter-chakra](https://nextarter-chakra.sznm.dev/): battery packed template to initialize Next.js app with Chakra UI & Typescript setup.

- [olamonde](https://olamonde.me/): One link to rule them all. Easily place your links in a beautiful single page.

- [spoker](https://spoker.sznm.dev/intro): Real-time multiparticipant scrum poker app. Estimate with your team.

- [Public APIs](https://publicapis.sznm.dev/): Find public APIs for your next project.

- [FeedHive](https://feedhive.io/): Social Media content creation platform.

- [Volca](https://volca.io): A SaaS boilerplate project with Node.js and React



## 🌎️ Websites



- [Pie Chart Creator](https://www.piechartcreator.site/): Quickly create sophisticated Pie Charts!. Powered By Chakra UI and React JS.

- [Schext](https://schext.com/): A powerful text schedule tool, that allows your clients to set appointments without you.

- [Life Pro Tips](https://lifeprotips.com/): Tips to improve your life. From the creator of /r/lifeprotips.

- [MockZilla](https://mockzilla.com/): MockZilla - Create Unlimited Free API Calls for your React/Vue.js/Angular Apps!

- [Boring+Ordinary](https://boringordinary.com/): A design and development agency based in Montreal. Powered by Chakra UI, Framer Motion, Next.js, and Sanity.

- [Devkind](https://devkind.com.au/): A full-fledge web development agency based in Melbourne. Powered by Chakra UI, Framer Motion, Next.js and Strapi.

- [Avana Wallet](https://www.avanawallet.com/): Solana blockchain non-custodial wallet that connects you to Web3 dapps, DeFi, GameFi and NFTs. Powered by Chakra UI and Next.js.

- [Arkar's Website ](https://arkardev.space/):Arkar's personal website, Built with Chakra UI , GraphCMS, Next.js,

- [WeWork4Days](https://www.wework4days.com/): A website for finding 4-day week jobs 🔥

- [Rich Haines's Website](https://richardhaines.dev/)

- [Daniel Wirtz's Personal site](https://github.com/wirtzdan/website): Personal website build with Chakra UI, NextJS and Airtable ✨

- [Nirmalya Ghosh's Site](https://github.com/ghoshnirmalya/nirmalyaghosh.com): Personal portfolio built using Next.js, Chakra UI, SEO, MDX and TypeScript.

- [Laura Beatris's Site](https://github.com/LauraBeatris/laurabeatris.com): My portfolio built with Next.js, Chakra UI and GraphCMS.

- [SurabayaJS's Site](https://github.com/surabayajs/surabayajs.org): Landing page for SurabayaJS, made using Next.js, Chakra UI, and Contentful 🐊

- [Lazar Nikolov's Site](https://github.com/lazarnikolov94/nikolovlazar.com): Lazar's personal website. Made using Next.JS, Chakra UI, MDX, Prisma, PlanetScale, Airtable, Raindrop, and it’s deployed on Vercel.

- [Bloomberg Global Coal Countdown](https://bloombergcoalcountdown.com/): A Rich data vizualitation website built with Next.JS, Chakra UI, and Nivo as the go-to online resource to track the world’s progress towards a coal-free future, by [Zero One Group](https://github.com/zero-one-group).

- [Klerye](https://www.klerye.com/): A platform to add and find Ghanaian Youtube and Twitch channels. Created using Next.js, Chakra-UI, Prisma, Railway's postgres, trpc and deployed on Vercel.

- [June](https://june.so): An app that generates instant product analytics reports on top of Segment. Made using Next.js and a custom Chakra UI theme.

- [TRIGO's Site](https://trigodev.com/): Company Website. We are a software development company specializing in business software. Our Website and all of our apps are powered by Chakra UI & co.

- [Hari Kotha's Site](https://harikotha.netlify.app/): Personal portfolio website built with React.js, React-Router and Chakra UI.

- [wattanx's Site](https://wattanx.dev/): Personal website of wattanx. Made using Next.js, Chakra UI.

- [Gurudutt Perichetla's Website](https://www.guruduttperi.com/): Guru's personal website. Built with NextJS and Chakra UI.

- [Rakhi Boxes](https://rakhiboxes.com/): A beautiful gift delivered straight to your loved ones door.

- [Bobobox Mandalika Campsite](https://bobobox.co.id/campsite/mandalika/): A landing page for promoting Mandalika Campsite by Bobobox X Eiger.

- [Newton Mbugua Portfolio](https://mbuguanewton.dev/): My personal porfolio build suing Next JS, Chakra UI and Notion as a CMS.

- [SURE Trust](https://suretrustforruralyouth.com/): Free e-Learning platform. Build with chakra UI and ReactJs.

- [inspektre](https://inspektre.io): SAAS Platform for Application Security Posture Management.

- [CeloPunk Auction](https://github.com/anhfactor/celopunk-auction): CeloPunk is a NFT marketplace on celo testnet chain. Made using Next.js, Chakra UI, MDX icon, and it's deployed on Vercel.

- [Gio Gold](https://www.giogold.com/): Gio Gold is an e-commerce web app, built with Next.js & Chakra UI. Our goal is to make investing in gold easy, affordable, and profitable for our valued customers.

- [Sharehouse](https://sharehouse.app): Australian Sharehouse/Housemate finder, built with Chakra UI, Next.js & Prisma 🏡💗

- [Muhammad Ahmad's Site](https://mahmad.me): My personal portfolio website to show my skills, experience, and articles I published. This site built by using Next.js, Chakra Ui, Typescript and Dev.to api.

- [Supa Palette Website](https://supa-palette.com): Official website of Supa Palette plugin for Figma.

- [CodeNanshu](https://codenanshu.in): Personal portfolio website built with Nextjs, advanced Techs and Chakra UI.

- [Júlio Mühlbauer](https://juliomuhlbauer.com/) Personal portfolio built with Chakra UI, Nextjs and Typescript ⚡

- [itsrakesh - blog](https://blog.itsrakesh.co/): Blog website built with Chakra UI and NextJs.

- [eduo Instrukcije](https://instrukcije.eduo.help/): Platform for searching database of more than 6K questions and answers on school related questions for Croatian market. With over 200K+ monthly visits it is the biggest educational platform in Croatia.

- [Plan Harmony](https://planharmony.com): Collabortive trip planning.

- [Amine Elbarry](https://elbarryamine.com): Personal portfolio website built using Chakra⚡UI, Nextjs, Typescript and Graphql 💖

- [Yash Kapure](https://yashkapure.netlify.app/): Personal Portfolio website built using Chakra❤UI, ReactJS, TypeScript and some of my CSS Skills.

- [Vizima](https://www.vizima.in): - Company Website. We are an Indian hospitality company. Our Website is powered by Chakra UI, NextJS & Typescript.

- [Darren Dube's website](https://darrendube.com): Personal Economics and Data Sicence website built with 💖 using Chakra UI, GatsbyJS Graphql.



## 📚️ Libraries



- [Chakra+Formik Integration Experiment](https://github.com/with-heart/chakra-formik-experiment/): An experiment for tight-knit Chakra+Formik integration with a familiar API.

- [Next-mdx-boilerplate](https://github.com/whoisryosuke/next-mdx-boilerplate): NextJS + MDX starter with examples (Linting, Styled Components, Chakra UI).

- [Start-ui](https://github.com/BearStudio/start-ui): Opinionated UI starter with ⚛️ React, ⚡️ Chakra UI, ⚛️ React Query & 🐜 Formiz — From the 🐻 BearStudio Team

- [React-hook-form-generator](https://github.com/FionnCasey/react-hook-form-generator): Generate React forms from schema using Chakra UI and React Hook Form.

- [Bison](https://github.com/echobind/bisonapp): A Full Stack Jamstack in-a-box brought to you by Echobind.

- [Fire Hydrant Design System](https://github.com/firehydrant/design-system): FireHydrant flavored React component library, built using Chakra UI.



## 🛠️ Tools



- [Chakra Figma UI Kit](https://www.figma.com/community/file/971408767069651759): Chakra UI's official Figma components library.

- [Themera](https://themera.vercel.app/): Create Chakra UI color schemes in seconds ⚡️

- [OpenChakra](https://openchakra.app/): Full-featured visual editor and code generator for React using Chakra UI.

- [Nextchakra-starter](https://github.com/sozonome/nextchakra-starter): template to initialize PWA ready Next.js app with Chakra UI & Typescript setup ✨

- [Frontity-chakra-ui-theme](https://github.com/chakra-ui/frontity-chakra-ui-theme): A Frontity theme built with Chakra UI.

- [Chakra-ui-autocomplete](https://github.com/koolamusic/chakra-ui-autocomplete): An utility autocomplete UI library to use with Chakra UI.

- [Chakra-ui-navbar](https://github.com/dimitrisraptis96/chakra-ui-navbar): Fully-responsive NavBar component for landing pages built with Chakra-UI.

- [Chakra-ui-markdown-renderer](https://github.com/mustaphaturhan/chakra-ui-markdown-renderer): react-markdown renderer for people who using Chakra-UI's CSSReset component.

- [Chakra-next](https://github.com/47ng/chakra-next): Opinionated design system for React, based on Chakra UI + Next.js, written in TypeScript.

- [chakra-ui-steps](https://github.com/jeanverster/chakra-ui-steps): Steps component designed to work seamlessly with Chakra UI.

- [Formik-chakra-ui](https://github.com/kgnugur/formik-chakra-ui): Your Chakra-UI bindings for Formik.

- [Choc Autocomplete](https://github.com/anubra266/choc-autocomplete): 🏇 Autocomplete Component Package for Chakra UI.

- [create-chakra-icons](https://github.com/kodingdotninja/create-chakra-icons): Transform SVG to React Chakra UI  ✨

- [Chakra Datepicker](https://github.com/uselessdev/datepicker): A simple datepicker with Chakra-UI and date-fns.

- [HyperTheme Editor](https://www.hyperthe.me/): An advanced live theme editor for your Chakra UI projects.

- [Chakra Capsize](https://github.com/ceteio/chakra-capsize): The power of [Capsize](https://seek-oss.github.io/capsize/) inside Chakra UI.

- [eslint-plugin-chakra-ui](https://github.com/Monchi/eslint-plugin-chakra-ui): ESLint rules for Chakra UI, such as enforcing the order of props to be semantic.

- [react-spreadsheet-import](https://github.com/UgnisSoftware/react-spreadsheet-import): An import flow component for Excel/CSV. Built with Chakra-UI and fully customisable.

- [Chakra UI Prose](https://github.com/nikolovlazar/chakra-ui-prose): A custom Chakra UI component that adds ready-made styles for rendering remote HTML content.

- [Supa Palette Plugin](https://www.figma.com/community/plugin/1103648664059257410/Supa-Palette): All-in-one palettes generator, editor and manager for Figma.

- [withTypeScale](https://github.com/TylerAPfledderer/chakra-ui-typescale): Theme extension for Chakra UI, which generates theming for font type scales.



## 📝 Articles



- [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)

- [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)

- [How To Build an Advanced Multipart Component with Chakra UI](https://www.lekoarts.de/react/how-to-build-an-advanced-multipart-component-with-chakra-ui)



## 📺️ Videos



- [Chakra UI for Beginners](https://www.chakrauiforbeginners.com/)

- [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)

- [Customise your theme and components](https://youtube.com/watch?v=1J8dUyeUWO4)

- [Learn Chakra UI by building a Todo Application with Local Storage, Dark Mode enabled](https://youtube.com/watch?v=QVnkGqEsbK0)

- [Design Workflow with Chakra UI and Figma](https://youtu.be/Gm7qHn9Y_Ro)

- [Chakra UI crash course](https://youtu.be/hJ873mLhmFQ)

- [Chakra Shorts #1 - Dynamic Shadow Image](https://www.youtube.com/watch?v=HMTyQjASff4)

- [Chakra Shorts #2 - Custom Ring Colors](https://www.youtube.com/watch?v=7p16X1JkEE0)

- [Maintaining Chakra UI](https://www.youtube.com/watch?v=0TLxtE_GCbM)

- [How to use Chakra UI's Default Theme](https://www.youtube.com/watch?v=KOCAnM7HJ4U)

- [Chakra UI and Gatsby - Getting Started](https://www.youtube.com/watch?v=hXM9Ju_NIpU)

- [How to enable Right-to-Left (RTL) support using Chakra UI](https://www.youtube.com/watch?v=PzEHoqLj4OM)



## Contribute



Contributions welcome! Read the [contribution guidelines](contributing.md) first.