Sponsor

Build accessible React apps & websites with speed

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

Get Started GitHub

Star

Accessible

Chakra UI strictly follows WAI-ARIA standards. All components come with proper attributes and keyboard interactions out of the box.

Themeable

Quickly and easily reference values from your theme throughout your entire application, on any component.

Composable

Components were built with composition in mind. You can leverage any component to create new things.

Code components for your React Apps with speed using Chakra.

// Sample component from airbnb.com

<Box>
  <Image rounded="md" src="https://bit.ly/2k1H1t6"/>
  <Flex align="baseline" mt={2}>
    <Badge variantColor="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>

// Sample component from airbnb.com
<Box>
  <Image rounded="md" src="https://bit.ly/2k1H1t6"/>
  <Flex align="baseline" mt={2}>
    <Badge variantColor="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>

Plus

Verified • Cape Town

Modern, Chic Penthouse with Mountain, City & Sea Views

$119/night

4.84 (190)

Build accessible React apps & websites.css-1ocq770{color:#319795;} with speed

Accessible

Themeable

Composable

Code components for your React Apps with speed using Chakra.

Build accessible React apps & websites with speed