React
@chakra-ui/react
Responsive and accessible React UI components built with React and Emotion
Animation
react
ui
design-system
react-components
uikit
accessible
components
emotion
library
@chakra-ui/react
Stars
41k
Weekly
1.5M
Open issues
11
Bundle
~25 kB
Installation
npm install @chakra-ui/reactCode example
import { Button, HStack } from "@chakra-ui/react";
export function Example() {
return (
<HStack>
<Button colorScheme="teal">Save</Button>
<Button variant="outline">Cancel</Button>
</HStack>
);
}Pros & cons
Pros
- Actively maintained by Segun Adebayo <sage@adebayosegun.com>
- 1.5M weekly downloads. Battle tested
- First-class TypeScript definitions
- MIT licensed
Considerations
- Adds roughly ~25 kB to your bundle
- Needs client-only rendering in SSR frameworks
- Not supported in React Native
- 11 open issues on GitHub