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.