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, Center, Image, Flex, Badge, Text } from "@chakra-ui/react";
import { MdStar } from "react-icons/md";

export default function Example() {
  return (
    <Center h="100vh">
      <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>
    </Center>
  );
}

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.

Built with Chakra UI ⚡️

A collection of websites and projects built with Chakra UI

See showcase
thirdweb

thirdweb

Snappify

Snappify

HyperTheme Editor

HyperTheme Editor

UI Foundations

UI Foundations

Chakra UI Pro

Chakra UI Pro

June

June

Chakra Templates

Chakra Templates

Choc UI

Choc UI

Chakra is growing quickly

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

1.5M

Downloads per month

19.7K

Github stars

10

Core contributors

7.7K

Discord members

Chakra Heroes 🥇

Loved by product people like you

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 🏦

  • Open Source Collective
  • Triplebyte
  • Thinkmill
  • Datastory
  • Touchless
  • BRIKL
  • Echobind
  • Meeshkan
  • UsabilityHub
  • SEND
  • ShootProof
  • Sizzy
  • ADA School
  • Tuteria
  • Lattice
  • Shogun
  • iFixit
  • CloudDevs
  • Chakra UI Pro
  • Shogun Labs, Inc.
  • Scribe
  • Trustpage
  • Real Targeted Traffic
  • Targeted Website Traffic
  • Plutorepo Networks
  • THE PADDING
  • techreviewer
  • Bejamas
  • Livecycle
  • Strapi
  • webkid
  • SureBet
  • Core
  • Goread.io
  • Hostingstep

Individual Sponsors 🥇

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