Awesome
Awesome Chakra UI
<!-- ## CONTRIBUTING - Please make sure to read the [Contributing Guide](./code-of-conduct.md) before making a pull request. -->
A collection of Chakra UI-related awesomeness
https://github.com/chakra-ui/chakra-ui
Contents
🔥 Projects
- Chakra UI Time Scroller: This is a clean time picker/scroller built for javascript and typescript with chakra-ui.
- 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.
- Cosmos Kit: 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: OnlyFans, but for pictures of desk setups.
- 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.
- 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.
- thirdweb: A web3 platform that offers contracts, intuitive SDKs, a dashboard 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.
- 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.
- Dev Resources: A collaborative list of resources for developers.
- Horizon UI: Trendiest Open Source Admin Template based on Chakra UI!
- Pesabooks: A digital platform to save and invest together, with Crypto.
- Portion Monitor: Record Daily Portion Intake, Set Limits, and View Reports.
- TemplatesKart: Production-ready hand crafted beautiful Projects and Components list built on top of Chakra UI.
- nextarter-chakra: battery packed template to initialize Next.js app with Chakra UI & Typescript setup.
- olamonde: One link to rule them all. Easily place your links in a beautiful single page.
- spoker: Real-time multiparticipant scrum poker app. Estimate with your team.
- Public APIs: Find public APIs for your next project.
- FeedHive: Social Media content creation platform.
- Volca: A SaaS boilerplate project with Node.js and React
🌎️ Websites
- Pie Chart Creator: Quickly create sophisticated Pie Charts!. Powered By Chakra UI and React JS.
- Schext: A powerful text schedule tool, that allows your clients to set appointments without you.
- Life Pro Tips: Tips to improve your life. From the creator of /r/lifeprotips.
- MockZilla: MockZilla - Create Unlimited Free API Calls for your React/Vue.js/Angular Apps!
- Boring+Ordinary: A design and development agency based in Montreal. Powered by Chakra UI, Framer Motion, Next.js, and Sanity.
- Devkind: A full-fledge web development agency based in Melbourne. Powered by Chakra UI, Framer Motion, Next.js and Strapi.
- Avana Wallet: 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 :Arkar's personal website, Built with Chakra UI , GraphCMS, Next.js,
- 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.
- 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.
- wattanx's Site: Personal website of wattanx. Made using Next.js, Chakra UI.
- Gurudutt Perichetla's Website: Guru's personal website. Built with NextJS and Chakra UI.
- Rakhi Boxes: A beautiful gift delivered straight to your loved ones door.
- Bobobox Mandalika Campsite: A landing page for promoting Mandalika Campsite by Bobobox X Eiger.
- Newton Mbugua Portfolio: My personal porfolio build suing Next JS, Chakra UI and Notion as a CMS.
- SURE Trust: Free e-Learning platform. Build with chakra UI and ReactJs.
- inspektre: SAAS Platform for Application Security Posture Management.
- 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: 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: Australian Sharehouse/Housemate finder, built with Chakra UI, Next.js & Prisma 🏡💗
- Muhammad Ahmad's Site: 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: Official website of Supa Palette plugin for Figma.
- CodeNanshu: Personal portfolio website built with Nextjs, advanced Techs and Chakra UI.
- Júlio Mühlbauer Personal portfolio built with Chakra UI, Nextjs and Typescript ⚡
- itsrakesh - blog: Blog website built with Chakra UI and NextJs.
- eduo Instrukcije: 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: Collabortive trip planning.
- Amine Elbarry: Personal portfolio website built using Chakra⚡UI, Nextjs, Typescript and Graphql 💖
- Yash Kapure: Personal Portfolio website built using Chakra❤UI, ReactJS, TypeScript and some of my CSS Skills.
- Vizima: - Company Website. We are an Indian hospitality company. Our Website is powered by Chakra UI, NextJS & Typescript.
- Darren Dube's website: Personal Economics and Data Sicence website built with 💖 using Chakra UI, GatsbyJS Graphql.
📚️ 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.
- 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 <Icon /> ✨
- 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.
- react-spreadsheet-import: An import flow component for Excel/CSV. Built with Chakra-UI and fully customisable.
- Chakra UI Prose: A custom Chakra UI component that adds ready-made styles for rendering remote HTML content.
- Supa Palette Plugin: All-in-one palettes generator, editor and manager for Figma.
- withTypeScale: 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
- Track user location coordinates realtime using geolocation api, nextjs , nodejs and socket.io
- Setup Nextjs , Apollo client and Chakra UI for your upcomming projects
- Image Uploading using golang and react
- 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
- How To Build an Advanced Multipart Component with Chakra UI
📺️ Videos
- Chakra UI for Beginners
- 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
- Chakra UI crash course
- Chakra Shorts #1 - Dynamic Shadow Image
- Chakra Shorts #2 - Custom Ring Colors
- Maintaining Chakra UI
- How to use Chakra UI's Default Theme
- Chakra UI and Gatsby - Getting Started
- How to enable Right-to-Left (RTL) support using Chakra UI
Contribute
Contributions welcome! Read the contribution guidelines first.