@chakra-ui/react

What is @chakra-ui/react?

@chakra-ui/react is a simple, modular, and accessible component library that gives you the building blocks you need to build your React applications. It provides a set of accessible, reusable, and composable React components that make it easy to create beautiful and responsive user interfaces.

What are @chakra-ui/react's main functionalities?

Responsive Design

Chakra UI provides responsive design utilities that allow you to easily create responsive layouts. The `Box` component in this example adjusts its width based on the screen size.

import { Box } from '@chakra-ui/react';

function ResponsiveBox() {
  return (
    <Box w={{ base: '100%', md: '50%' }} p={4} bg='tomato'>
      This box is responsive
    </Box>
  );
}

Theming

Chakra UI allows you to extend and customize the default theme to match your design requirements. This example demonstrates how to create a custom theme and apply it to a `Box` component.

import { ChakraProvider, extendTheme } from '@chakra-ui/react';

const theme = extendTheme({
  colors: {
    primary: {
      100: '#E3F2F9',
      200: '#C5E4F3',
      300: '#A2D4EC',
      400: '#7AC1E4',
      500: '#47A9DA',
      600: '#0088CC',
      700: '#007AB8',
      800: '#006BA1',
      900: '#005885',
    },
  },
});

function App() {
  return (
    <ChakraProvider theme={theme}>
      <Box bg='primary.500' color='white' p={4}>
        Custom Themed Box
      </Box>
    </ChakraProvider>
  );
}

Accessibility

Chakra UI components are built with accessibility in mind. This example shows an accessible `Button` component with an `aria-label` attribute.

import { Button } from '@chakra-ui/react';

function AccessibleButton() {
  return (
    <Button colorScheme='blue' aria-label='Submit Form'>
      Submit
    </Button>
  );
}

Composability

Chakra UI components are designed to be composable, allowing you to build complex UIs from simple building blocks. This example demonstrates how to use `Box` and `Stack` components together.

import { Box, Text, Stack } from '@chakra-ui/react';

function ComposableComponent() {
  return (
    <Stack spacing={4} direction='row' align='center'>
      <Box p={5} shadow='md' borderWidth='1px'>
        <Text mt={4}>Box 1</Text>
      </Box>
      <Box p={5} shadow='md' borderWidth='1px'>
        <Text mt={4}>Box 2</Text>
      </Box>
    </Stack>
  );
}

Other packages similar to @chakra-ui/react

material-ui

Material-UI is a popular React UI framework that implements Google's Material Design. It offers a wide range of components and customization options. Compared to Chakra UI, Material-UI has a more extensive set of components and follows the Material Design guidelines strictly, which might be beneficial for projects that require a Material Design look and feel.

ant-design

Ant Design is a comprehensive UI framework for React that provides a large set of high-quality components and design guidelines. It is widely used in enterprise applications. Compared to Chakra UI, Ant Design offers more components and is more opinionated in terms of design, which can be advantageous for building consistent and feature-rich applications.

semantic-ui-react

Semantic UI React is the official React integration for Semantic UI. It provides a set of components that are easy to use and customize. Compared to Chakra UI, Semantic UI React focuses on providing a semantic and human-friendly HTML structure, which can be useful for developers who prefer a more semantic approach to building UIs.

react-bootstrap

React Bootstrap is a popular UI framework that brings the power of Bootstrap to React. It provides a set of components that are easy to use and integrate with Bootstrap's styles. Compared to Chakra UI, React Bootstrap is more focused on providing Bootstrap-compatible components, which can be beneficial for projects that already use or plan to use Bootstrap.

README

Welcome to Chakra UI ⚡️

• Works out of the box. Chakra UI contains a set of polished React components that work out of the box.

• Flexible & composable. Chakra UI components are built on top of a React UI Primitive for endless composability.

• Accessible. Chakra UI components follows the WAI-ARIA guidelines specifications.

• Dark Mode 😍: All components are dark mode compatible.

Looking for the documentation?

https://chakra-ui.com

Installing Chakra UI

⚡️Chakra UI is made up of multiple components and tools which you can import one by one. All you need to do is install the @chakra-ui/react package:

$ yarn add @chakra-ui/react
# or
$ npm install --save @chakra-ui/react

Getting set up

To start using the components, please follow these steps:

1. Wrap your application in a ThemeProvider provided by @chakra-ui/react

import { ColorModeProvider, ThemeProvider } from "@chakra-ui/react"

const App = ({ children }) => (
  <ThemeProvider>
    <ColorModeProvider>{children}</ColorModeProvider>
  </ThemeProvider>
)

ColorModeProvider is a context that provides light mode and dark mode values to the components. It also comes with a function to toggle between light/dark mode.

1. Now you can start using components like so!:

import { Button } from "@chakra-ui/react"

const App = () => <Button>I just consumed some ⚡️Chakra!</Button>

Contributing

Feel like contributing? That's awesome! We have a contributing guide to help guide you.

The components to be built come from the Aria Practices Design Patterns and Widgets.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Segun Adebayo 💻 🚧 📖 💡 🎨

Tioluwani Kolawole 📖 💡 🚧

This project follows the all-contributors specification. Contributions of any kind welcome!