@chakra-ui/react
Responsive and accessible React UI components built with React and Emotion
Search packages..
@chakra-ui/reactSimilar Packages:
Npm Package Weekly Downloads Trend
3 Years
Cumulative GitHub Star Trend
Stat Detail
Popular Comparisons
@chakra-ui/react
README for @chakra-ui/react
@chakra-ui/react
Chakra UI is a component system for building products with speed. Accessible React components for building high-quality web apps and design systems. Works with Next.js RSC.
- Works out of the box. A set of polished React components with sensible defaults.
- Flexible & composable. Components are built on top of headless UI primitives (Ark UI) for endless composability.
- Accessible. Components follow the WAI-ARIA guidelines and are tested against common accessibility issues.
- Themeable. Customize every part of the components with design tokens, recipes, and semantic tokens. Dark mode included.
Documentation
- Latest: https://chakra-ui.com
- v2: https://v2.chakra-ui.com
- v1: https://v1.chakra-ui.com
Installation
Install the @chakra-ui/react package and its peer dependency:
# with npm
npm i @chakra-ui/react @emotion/react
# with yarn
yarn add @chakra-ui/react @emotion/react
# with pnpm
pnpm add @chakra-ui/react @emotion/react
# with bun
bun add @chakra-ui/react @emotion/react
Getting started
- Wrap your application with the
ChakraProvidercomponent:
import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
export const App = ({ children }) => (
<ChakraProvider value={defaultSystem}>{children}</ChakraProvider>
)
- Start using components:
import { Button } from "@chakra-ui/react"
const Demo = () => <Button>I just consumed some ⚡️Chakra!</Button>
For framework-specific setup (Next.js, Vite, etc.), see the installation guide.
Contributing
Feel like contributing? That's awesome! Read the contribution guide to get started.
License
MIT © Segun Adebayo