Chakra UI

Name: Chakra UI
Author: Chakra UI (open source project)

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.

By Chakra UI (open source project)Open sourceSince 2019UI Libraries

Facts checked on 27 September 2026 against the sources listed at the end of this page.

Visit chakra-ui.com Compare

Pricing: Open sourceFree plan: Yes, Chakra UI is completely free
Open source: YesMIT
GitHub stars: 40,676
npm downloads a week: 2Mup 9% on the week before
Latest release: @chakra-ui/cod…1 month 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 alternatives

Tool	Pricing	GitHub stars
Tailwind CSSUtility-first CSS framework for building custom designs directly in markup, now owned by Shopify.	Freemium	97.8k
Radix UIUnstyled, accessible React component primitives for building your own design system.	Open source	19.4k
shadcn/uiCopy-paste, customizable UI components built with Tailwind CSS, not installed as a package.	Open source	125k
Material UIReact component library implementing Google's Material Design, with free core and paid MUI X components.	Freemium	99.1k
Ant DesignEnterprise-focused React component library and design system, maintained by Alibaba's Ant Group.	Open source	99.7k
Headless UIUnstyled, accessible UI components from the Tailwind CSS team, for React and Vue.	Open source	28.8k

All 10 alternatives to Chakra UI, side by side

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

Chakra UI

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.