Chakra UI
Chakra UI is a free, open source React component library offering accessible, styled components with a simple, composable styling API based on style props rather than separate CSS files. It covers common UI needs like layout, forms, buttons and overlays, with built-in support for theming and dark mode. It's MIT-licensed and free to use.
Facts checked on against the sources listed at the end of this page.
- Pricing
- Open sourceFree plan: Yes, Chakra UI is completely free
- Open source
- YesMIT
- GitHub stars
- 40,708+37 in the last 30 days
- npm downloads a week
- 2Mup 5% on the week before
- Latest release
- @chakra-ui/cod…2 months ago
- Releases in 90 days
- 5about 2 a month
A good fit for
- React projects that want a styled, accessible component library with minimal setup
- Teams that prefer a style-props API over writing separate CSS files or class names
- Building interfaces with consistent theming and built-in dark mode support
- Developers who want commonly needed layout primitives alongside higher-level components
Not a good fit for
- Teams that want an unstyled primitives library to build a fully custom look from scratch
- Non-React frameworks, since Chakra UI is React-specific
- Projects that specifically want a Tailwind-based utility-class workflow rather than a style-props API
Chakra UI pricing
Chakra UI is completely free and open source under the MIT license.
Prices in USD, checked on 27 September 2026. Current prices on chakra-ui.com.
Main features
- Style props API
- Apply styles directly as component props instead of writing separate CSS.
- Accessible components
- Built with accessibility (ARIA attributes, keyboard navigation) in mind by default.
- Theming system
- Customize colors, typography and spacing through a central theme.
- Dark mode support
- Built-in light and dark color scheme handling.
- Layout primitives
- Composable layout components like Box, Stack and Grid for building interfaces quickly.
- Responsive style syntax
- Array or object syntax for applying different styles at different breakpoints.
About Chakra UI
Chakra UI provides a set of accessible, styled React components, from layout primitives like Box and Stack to higher-level components like modals, menus and form inputs, letting developers build interfaces quickly with sensible defaults.
Styling is done through style props directly on components, for example setting color, padding or width as props rather than writing separate CSS classes, which Chakra compiles down efficiently at build time.
The library includes a theming system for customizing colors, typography and spacing across an application, along with built-in accessibility features and support for light and dark color schemes.
- Made by
- Chakra UI (open source project)
- Free plan
- Yes, Chakra UI is completely free
- Available on
- React
Usage and activity
Weekly npm downloads of @chakra-ui/react, last 12 months.
Recent releases
- @chakra-ui/[email protected]2 months ago
- @chakra-ui/[email protected]2 months ago
- @chakra-ui/[email protected]2 months ago
- @chakra-ui/[email protected]2 months ago
- @chakra-ui/[email protected]2 months ago
Chakra UI alternatives
Chakra UI compared
Chakra UIvsRadix UI
Radix UI gives you unstyled, accessible React primitives with no visual styling at all, meant to be styled entirely by you.
Chakra UIvsTailwind CSS
Tailwind CSS is a utility-first CSS framework that styles any markup with small composable classes, and works with any framework or plain HTML.
Questions about Chakra UI
Is Chakra UI free?
Yes, it's completely free and open source under the MIT license.
How does styling work in Chakra UI?
Through style props applied directly to components, such as setting color, padding or width as props, rather than writing separate CSS files.
Does Chakra UI support dark mode?
Yes, light and dark color schemes are supported out of the box.
Is Chakra UI accessible?
Yes, components are built with accessibility in mind, including ARIA attributes and keyboard navigation.
Sources and links
Work on Chakra UI? Claim this listing. Something wrong or out of date? Suggest a correction. Stats come from the public GitHub and npm APIs and update every day.