chakraui

Chakra UI

Chakra UI is an accessible component library for React, utilizing style props and modular design tokens to rapidly compose responsive, themeable user interfaces.

When to Use

• Accessible React Component Systems: Building accessible web apps adhering strictly to WAI-ARIA standards.
• Component-Driven Styling with Style Props: Styling UI components directly via JSX props with design tokens.
• Dark Mode & Theming: Implementing color mode switching and responsive themes with minimal setup.
• Modern Next.js & Vite SPAs: Creating accessible design systems with Chakra UI v3 / Ark UI foundations.

Quick Start

import { ChakraProvider, Box, Heading, Button, VStack } from "@chakra-ui/react";

export function App() {
  return (
    <ChakraProvider>
      <VStack spacing={4} p={8} align="stretch">
        <Box p={5} shadow="md" borderWidth="1px" borderRadius="lg">
          <Heading fontSize="xl">Welcome to Chakra UI</Heading>
          <Button colorScheme="teal" mt={4}>
            Get Started
          </Button>
        </Box>
      </VStack>
    </ChakraProvider>
  );
}

Core Concepts

Style Props & Responsive Layout Tokens

Building layouts using tokenized props:

import { Box, Flex, Heading, Text, Button, Stack } from "@chakra-ui/react";

export function HeroBanner() {
  return (
    <Box
      bg={{ base: "gray.50", md: "gray.100", _dark: "gray.900" }}
      py={{ base: 8, md: 16 }}
      px={{ base: 4, md: 8 }}
      borderRadius="xl"
    >
      <Stack spacing={4} maxW="container.md" mx="auto" textAlign="center">
        <Heading size={{ base: "xl", md: "2xl" }} color="teal.500">
          Scalable Design System
        </Heading>
        <Text
          fontSize={{ base: "md", md: "lg" }}
          color="gray.600"
          _dark={{ color: "gray.300" }}
        >
          Build responsive, fully accessible web applications with Chakra UI
          style props.
        </Text>
        <Flex justify="center" gap={4} pt={2}>
          <Button colorPalette="teal" size="lg">
            Get Started
          </Button>
          <Button variant="outline" size="lg">
            Documentation
          </Button>
        </Flex>
      </Stack>
    </Box>
  );
}