Prebuilt
Chakra UI Components
for faster development

Choc UI is a set of accessible and reusable components that are commonly used in web applications. Provides premade responsive and color mode flexible components to help you build faster than ever.

Get Started Github

Faster design and delivery.

Spend less time building blocks and more time building a great experience for your customers.

User with Details

<Flex
  bg="#edf3f8"
  _dark={{
    bg: "#3e3e3e",
  }}
  p={50}
  w="full"
  alignItems="center"
  justifyContent="center"
>
  <Box
    w="sm"
    mx="auto"
    bg="white"
    _dark={{
      bg: "gray.800",
    }}
    shadow="lg"
    rounded="lg"
    overflow="hidden"
  >
    <Image
      w="full"
      h={56}
      fit="cover"
      objectPosition="center"
      src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80"
      alt="avatar"
    />

    <Flex alignItems="center" px={6} py={3} bg="gray.900">
      <Icon as={MdHeadset} h={6} w={6} color="white" />

      <chakra.h1 mx={3} color="white" fontWeight="bold" fontSize="lg">
        Focusing
      </chakra.h1>
    </Flex>

    <Box py={4} px={6}>
      <chakra.h1
        fontSize="xl"
        fontWeight="bold"
        color="gray.800"
        _dark={{
          color: "white",
        }}
      >
        Patterson johnson
      </chakra.h1>

      <chakra.p
        py={2}
        color="gray.700"
        _dark={{
          color: "gray.400",
        }}
      >
        Full Stack maker & UI / UX Designer , love hip hop music Author of
        Building UI.
      </chakra.p>

      <Flex
        alignItems="center"
        mt={4}
        color="gray.700"
        _dark={{
          color: "gray.200",
        }}
      >
        <Icon as={BsFillBriefcaseFill} h={6} w={6} mr={2} />

        <chakra.h1 px={2} fontSize="sm">
          Choc UI
        </chakra.h1>
      </Flex>

      <Flex
        alignItems="center"
        mt={4}
        color="gray.700"
        _dark={{
          color: "gray.200",
        }}
      >
        <Icon as={MdLocationOn} h={6} w={6} mr={2} />

        <chakra.h1 px={2} fontSize="sm">
          California
        </chakra.h1>
      </Flex>
      <Flex
        alignItems="center"
        mt={4}
        color="gray.700"
        _dark={{
          color: "gray.200",
        }}
      >
        <Icon as={MdEmail} h={6} w={6} mr={2} />

        <chakra.h1 px={2} fontSize="sm">
          patterson@example.com
        </chakra.h1>
      </Flex>
    </Box>
  </Box>
</Flex>;

<Flex
  bg="#edf3f8"
  _dark={{
    bg: "#3e3e3e",
  }}
  p={50}
  w="full"
  alignItems="center"
  justifyContent="center"
>
  <Box
    w="sm"
    mx="auto"
    bg="white"
    _dark={{
      bg: "gray.800",
    }}
    shadow="lg"
    rounded="lg"
    overflow="hidden"
  >
    <Image
      w="full"
      h={56}
      fit="cover"
      objectPosition="center"
      src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80"
      alt="avatar"
    />

    <Flex alignItems="center" px={6} py={3} bg="gray.900">
      <Icon as={MdHeadset} h={6} w={6} color="white" />

      <chakra.h1 mx={3} color="white" fontWeight="bold" fontSize="lg">
        Focusing
      </chakra.h1>
    </Flex>

    <Box py={4} px={6}>
      <chakra.h1
        fontSize="xl"
        fontWeight="bold"
        color="gray.800"
        _dark={{
          color: "white",
        }}
      >
        Patterson johnson
      </chakra.h1>

      <chakra.p
        py={2}
        color="gray.700"
        _dark={{
          color: "gray.400",
        }}
      >
        Full Stack maker & UI / UX Designer , love hip hop music Author of
        Building UI.
      </chakra.p>

      <Flex
        alignItems="center"
        mt={4}
        color="gray.700"
        _dark={{
          color: "gray.200",
        }}
      >
        <Icon as={BsFillBriefcaseFill} h={6} w={6} mr={2} />

        <chakra.h1 px={2} fontSize="sm">
          Choc UI
        </chakra.h1>
      </Flex>

      <Flex
        alignItems="center"
        mt={4}
        color="gray.700"
        _dark={{
          color: "gray.200",
        }}
      >
        <Icon as={MdLocationOn} h={6} w={6} mr={2} />

        <chakra.h1 px={2} fontSize="sm">
          California
        </chakra.h1>
      </Flex>
      <Flex
        alignItems="center"
        mt={4}
        color="gray.700"
        _dark={{
          color: "gray.200",
        }}
      >
        <Icon as={MdEmail} h={6} w={6} mr={2} />

        <chakra.h1 px={2} fontSize="sm">
          patterson@example.com
        </chakra.h1>
      </Flex>
    </Box>
  </Box>
</Flex>;

An experience you'd expect from a component library

Opinionated and designed for daily use.

Live Editor

Live code editor, so you can play around with code, before extracting into your work.

Light and Dark UI

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

Fully Responsive

From the smallest to the largest, our Components are comfortable on any screen.

Help us grow

We're open source

because the right to learn and to share what is learned with others is fundamental to product growth and relevance.

So join us now.

Contribute to Choc UI

Our Sponsors

Your financial contributions help ensure Choc UI continues to be developed and maintained! Sponsor Choc UI with any price of your choice.

Support Choc UI

Proudly developed in by Anuoluwapo Abraham