Awesome Chakra UI

A collection of Chakra UI-related awesomeness

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

Contents

• Awesome Chakra UI
  • Contents
  • Projects
  • Websites
  • Libraries
  • Tools
  • Articles
  • Videos
  • Guides
  • Talks
  • Contribute

🔥 Projects

• Chakra UI Pro: Beautiful and responsive React components to build your application or marketing pages quicker. Created by the makers of Chakra UI.
• Chakra Templates: A growing collection of hand-crafted & responsive Chakra UI templates ready to drop into your React project.
• Choc UI: A set of accessible and reusable components that are commonly used in web applications.
• OnlySetups: OnlyFans, but for pictures of desk setups
• TwitterFOMO.dev: Best WebDev Tweets
• Dokz: Effortless documentation with Next.js and MDX.
• Opensource.builders: Opensource.builders is a website to find and request open-source alternatives to popular software you already use.
• Snappify A code snippet creator
• Purity UI Dashboard a free dashboard built with Chakra UI
• Chakra UI’s Design vs Dev Challenges the collection of Design vs. Dev Challenges
• Polygon Polygon is an upcoming open-source and privacy oriented social network. Uses Chakra UI and Next.js for the UI
• UI Foundations A premium UI/UX design platform built using Chakra UI
• DevKit: 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 and the 🧑‍🤝‍🧑 community.
• React Python IDE A Python IDE run in browser, built with ReactJS, 🔥 Chakra UI, skulpt and Xterm.js.
• Markdown Notes A fully responsive note-taking application in markdown language, built with Chakra UI, react-markdown and codemirror.
• Third Web A web3 platform that offer tools, intuitive SDKs and widgets for developers.
• Top.gg The Best Discord Bots and Servers.
• Octoclairvoyant A webapp to compare GitHub changelogs across multiple releases. Made with Next.js and Chakra UI.
• Roadster Website of Roadster - fresh and new discord bot. Made with Next.js and Chakra
• MockRocket Show off your app with jaw-dropping 3D mockups and product videos, right in your browser
• Saas UI An advanced component library build for SaaS products.

🌎️ Websites

• Beema Finance: Earn ultra-high, stable yields on dollars. Powered by DeFi. Built with Chakra UI 🌿.
• WeWork4Days: A website for finding 4-day week jobs 🔥.
• Rich Haines’s Website
• Daniel Wirtz’s Personal site: Personal website build with Chakra UI, NextJS and Airtable ✨.
• Nirmalya Ghosh’s Site: Personal portfolio built using Next.js, Chakra UI, SEO, MDX and TypeScript.
• Laura Beatris’s Site: My portfolio built with Next.js, Chakra UI and GraphCMS.
• SurabayaJS’s Site: Landing page for SurabayaJS, made using Next.js, Chakra UI, and Contentful 🐊.
• Lazar Nikolov’s Site: 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: 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.
• Klerye: 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: An app that generates instant product analytics reports on top of Segment. Made using Next.js and a custom Chakra UI theme.
• Confused’s Site: Creative engineering studio of digital products and video games. Website powered by NextJS, Typescript, Next-SEO, Chakra UI and Amplify.
• TRIGO’s Site: 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: Personal portfolio website built with React.js, React-Router and Chakra UI.

📚️ Libraries

• Chakra+Formik Integration Experiment: An experiment for tight-knit Chakra+Formik integration with a familiar API
• Next-mdx-boilerplate: NextJS + MDX starter with examples (Linting, Styled Components, Chakra UI).
• Start-ui: Opinionated UI starter with ⚛️ React, ⚡️ Chakra UI, ⚛️ React Query & 🐜 Formiz — From the 🐻 BearStudio Team
• React-hook-form-generator: Generate React forms from schema using Chakra UI and React Hook Form.
• Bison: A Full Stack Jamstack in-a-box brought to you by Echobind
• Fire Hydrant Design System: FireHydrant flavored React component library, built using Chakra UI

🛠️ Tools

• Chakra Figma UI Kit: Chakra UI’s official Figma components library.
• Chakra Play: An advanced online playground for Chakra UI.
• Themera: Create Chakra UI color schemes in seconds ⚡️.
• OpenChakra: Full-featured visual editor and code generator for React using Chakra UI.
• Nextchakra-starter: template to initialize PWA ready Next.js app with Chakra UI & Typescript setup ✨.
• Frontity-chakra-ui-theme: A Frontity theme built with Chakra UI.
• Chakra-ui-autocomplete: An utility autocomplete UI library to use with Chakra UI.
• Chakra-ui-navbar: Fully-responsive NavBar component for landing pages built with Chakra-UI.
• Chakra-ui-markdown-renderer: react-markdown renderer for people who using Chakra-UI’s CSSReset component.
• Chakra-next: Opinionated design system for React, based on Chakra UI + Next.js, written in TypeScript.
• chakra-ui-steps: Steps component designed to work seamlessly with Chakra UI.
• Formik-chakra-ui: Your Chakra-UI bindings for Formik
• Choc Autocomplete: 🏇 Autocomplete Component Package for Chakra UI
• create-chakra-icons Transform SVG to React Chakra UI ✨
• Chakra Datepicker A simple datepicker with Chakra-UI and date-fns
• HyperTheme Editor An advanced live theme editor for your Chakra UI projects
• Chakra Capsize The power of Capsize inside Chakra UI
• eslint-plugin-chakra-ui ESLint rules for Chakra UI, such as enforcing the order of props to be semantic

📝 Articles

• How ChakraUI complements your existing web development skills
• Accessibility on-demand with Chakra-ui and focus-visible
• Build a Landing Page with Chakra UI
• Customisations with Chakra UI
• Chakra UI and React-Hook-Form – How to Build Beautiful Forms
• Truncating Text using Chakra UI
• How to Set Up Chakra UI with Next JS by creating a Hero component
• Choosing the right component library for your design system: MUI vs Chakra

📺️ Videos

• Getting Started with Chakra UI
• The Future of Chakra UI (with Segun Adebayo & Lee Robinson)
• Building an Absence Tracker with Blitz JS and Chakra UI (Series)
• How to use Chakra UI with Next.js and React
• Customise your theme and components
• Learn Chakra UI by building a Todo Application with Local Storage, Dark Mode enabled.
• Design Workflow with Chakra UI and Figma

Guides

Talks

Contribute

Contributions welcome! Read the contribution guidelines first.