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 ⚑️

Your project can look as good as these! Check them out, get inspired!

See showcase

Chakra is growing quickly

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

1.8M

Downloads per month

32.5K

Github stars

7

Core contributors

8.9K

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
  • AppBrew, Inc.
  • CasinoHEX Phillipines
  • CasinoHEX
  • GitHub Sponsors
  • VPS Server
  • BearStudio
  • Ayrshare
  • FamousBlast
  • Soc-Promotion
  • Fit My Money
  • LegitGamblingSites
  • TightPoker
  • Elia saadeh
  • BairesDev

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