Build faster with Premium Chakra UI Components 💎

Learn more
Sponsor

Create accessible React apps with speed

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

Get StartedGitHub
Git Nations Award for the most impactful project to the community

Supported and Backed by

  • Echobind
  • Lattice
  • TrustPage
  • Shogun
  • Brikl
  • Usability Hub
  • Shoot Proof
  • 💖 Your company

Less code. More speed

Spend less time writing UI code and more time building a great experience for your customers.

import * as React from "react";
import { Box, Image, Flex, Badge, Text } from "@chakra-ui/react";
import { MdStar } from "react-icons/md";

export default function Example() {
  return (
    <Box p="5" maxW="320px" borderWidth="1px">
      <Image borderRadius="md" src="https://bit.ly/2k1H1t6" />
      <Flex align="baseline" mt={2}>
        <Badge colorScheme="pink">Plus</Badge>
        <Text
          ml={2}
          textTransform="uppercase"
          fontSize="sm"
          fontWeight="bold"
          color="pink.800"
        >
          Verified &bull; Cape Town
        </Text>
      </Flex>
      <Text mt={2} fontSize="xl" fontWeight="semibold" lineHeight="short">
        Modern, Chic Penthouse with Mountain, City & Sea Views
      </Text>
      <Text mt={2}>$119/night</Text>
      <Flex mt={2} align="center">
        <Box as={MdStar} color="orange.400" />
        <Text ml={1} fontSize="sm">
          <b>4.84</b> (190)
        </Text>
      </Flex>
    </Box>
  );
}

An experience you'd expect from a design system

Opinionated and designed for daily use.

Accessible

Chakra UI strictly follows WAI-ARIA standards for all components.

Themeable

Customize any part of our components to match your design needs.

Composable

Designed with composition in mind. Compose new components with ease.

Light and Dark UI

Optimized for multiple color modes. Use light or dark, your choice.

Developer Experience

Guaranteed to boost your productivity when building your app or website.

Active Community

We're a team of active maintainers ready to help you whenever you need.

Chakra is growing quickly

We're dedicated to improving the experience and performance of Chakra UI.

843.3K

Downloads per month

23.6K

Github stars

12

Core contributors

5.6K

Discord members

Chakra Heroes 🥇

  • Segun Adebayo
  • Sybren W
  • Jonathan Bakebwa
  • Christian Schröter
  • Folasade Agbaje
  • Mesut Koca
  • Gerrit Alex
  • Lazar Nikolov
  • Emmanuel Raymond
  • Daniel Schulz
  • Tim Kolberger
  • with-heart

Loved by product people like you

Ryan Florence @ryanflorence · Sep 4, 2019

People throw React component libraries and design systems at me regularly.

This might be the best one I've seen. The APIs are simple but composable and the accessibility on the couple components I looked is complete.

Great work @thesegunadebayo, really inspiring work

Colm Tuite @colmtuite · Sep 5, 2019

Awesome new open-source component library from @thesegunadebayo.

Really impressive stuff!

Lee Robinson @leeerob · Sep 4, 2019

This is incredible work. Amazing job Segun!

Echobind @echobind · Jun 16, 2020

Chakra UI has become part of our default stack for React apps, and we're happy to help sponsor the project.

Chakra saves our team tons of time, is well designed and documented, has solid accessibility defaults, and looks great out of the box.

Guillermo Rauch ▲ @rauchg · Sep 5, 2019

Chakra UI is glorious!

Dark mode support looks amazing and it is 100% built-in. I love the consistent use of focus styling and the subtle animation.

Great care for accessibility throughout. It is a guiding principle of the design system.

Last but not least, proudly made in 🇳🇬  by @thesegunadebayo!

Nick Trabue @nicktrabue · Jun 15, 2020

@thesegunadebayo.I tried out Chakra for the first time this weekend.

✅   Easy to use.

✅   Amazing Docs.

✅   Highly customizable.

Thank you for your hard work!

Tom Preston-Werner @mojombo · Jun 15, 2020

I've just become a sponsor of @thesegunadebayo's Chakra UI.

It is a really nice React component library that's properly open source (MIT).

https://chakra-ui.com You should check it out!

Aayush Iyer @aayush · May 23, 2020

Chakra is a fantastic component library that helps shape and accelerate the work we’re doing with Twilio Paste.

Thank you @thesegunadebayo!

Saša Šijak @ssijak · May 3, 2020

I find Chakra-UI the best React component framework.

It provides just enough to get started, implements sensible defaults, but is also very extensible and customisable because it uses #styledsystem and @emotioncss.

Thanks @thesegunadebayo 😎

Support Chakra UI 💖

Our maintainers devote their time, effort, and heart to ensure Chakra UI keeps getting better. Support us by donating to our collective 🙏

Open Collective

Sponsor the Chakra UI maintainers

Sponsor

Patreon

Sponsor the creator, Segun Adebayo

Sponsor

Organization Sponsors 🏦

Individual Sponsors 🥇

  • Segun Adebayo
  • Brennan D Baraban
  • Robert Tajnšek
  • Corey McGeachie
  • Jannik Wempe
  • Raathi
  • Juraj Krivda
  • Martian Lee
  • Timi Tejumola
  • Lee Robinson
  • Phil Keys
  • Charly MARTIN
  • Jonathan Wilke
  • Takeshi Tsukamoto
  • Christian Nwamba
  • Adrian Aleixandre
  • Babajide Owosakin
  • Lemuel Okoli
  • Thorben
  • Tom Preston-Werner
  • Peter Pistorius
  • Chris Cordle
  • Julien
  • Otto von Wachter
  • Alexander Frazer
  • Paweł Philipczyk
  • Ian Walter
  • Oliver Micke
  • David Johnson
  • ccxvee
  • Martin Camacho
  • Thomas Reuter
  • Andrew Miracle
  • Harinatha Bandi
  • Quido Hoekman
  • Thor 雷神 Schaeff
  • Amad Khan
  • Miyamae Yuya
  • Ajit Singh
  • Brady Dukart
  • Nathan Simpson
  • Dimitri Harding
  • Jeremy
  • Max Goodhart
  • Tim Kolberger
  • Raku Sakaguchi
  • Anton Alexandrenok
  • Simon Taisne
  • Lazar Nikolov
  • Mark Chandler
  • Jason Miazga
  • Lazar Nikolov
  • Tim Kolberger
  • Mark Chandler
  • Segun Adebayo
  • Peter Etelej
  • Robert Cheetham
  • Randy Lu
  • Kevin Woodfield
  • ri7nz
  • Mesut Koca
  • Jonathan Bakebwa
  • Javier Alaves
  • Ethan Li
  • Adarsh Jain
  • Javier Alaves
  • Christopher Kapic
  • Steve Gacka
  • Mike Bifulco
  • yoannfleurydev

Premium components New

Build faster with Chakra UI Pro 💎

Beautiful and responsive React components to build your application or marketing pages quicker.

Learn more

Chakra UI Pro Image

Invite us to speak at your next event

Want a Chakra UI core team member to speak at your next event? Invite us to create a memorable and engaging experience for your attendees.

Invite us to speak

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