whichdevtool?
Menu
StacksDirectory Pricing changes Glossary
VPS and cloud servers App hosting and PaaS Managed databases Transactional email APIs Email marketing and newsletters Domain registrars CDN, DNS and edge security Monitoring, uptime and error tracking Auth and identity Frontend and full-stack frameworks Backend frameworks UI component libraries AI model APIs File and object storage Payments and billing Background jobs, queues and workflows ORMs and database toolkits

Styled React component library · by Chakra Systems

Chakra UI

A styled, themeable React component library with a style-props system, CLI snippets and paid Chakra UI Pro blocks; it currently uses Emotion at runtime.

Visit chakra-ui.com ↗ Alternatives Free tier Open source
Chakra UI homepage
§1

Overview

Chakra UI is a React component library known for its style-props API, where layout and styling are passed as props mapped to design tokens. Version 3 reorganised the library: you install @chakra-ui/react and @emotion/react, then use the @chakra-ui/cli to add snippets (prebuilt wrappers such as the Provider, which composes ChakraProvider and next-themes for color mode) into your codebase. Node.js 20 or newer is required.

The installation guide is open about styling: today Chakra UI uses Emotion at runtime, and the long-term direction is a zero-runtime model inspired by Panda CSS, to be rolled out in phases. That matters if you use React Server Components heavily or care about runtime CSS cost.

Chakra Systems also sells Chakra UI Pro: 330+ blocks from banners to complete page layouts, built on v3, with lifetime access and free updates. The Personal licence is listed at $299 (reduced from $349); a Team licence covers all employees and contractors. The same company maintains Ark UI, Zag.js and Park UI.

§2

Pricing and plans

Free tier · no card

The Chakra UI library and free blocks are open source and free for any use.

At the limit Not stated The vendor does not say what happens at the limit, or we have not found it yet.

Plan Price What you get
Chakra UI Free Open-source component library
Pro Personal $299 one time Listed as reduced from $349; 330+ blocks, lifetime updates
Pro Team All employees and contractors; price not shown in the page text we could read

fromPrice is empty because Chakra UI Pro is a one-time lifetime purchase ($299 Personal), which the monthly/yearly price field cannot express. The Team price was not visible on the pricing page as fetched. Pro blocks require Chakra UI v3; v2 users have legacy blocks.

Source: pro.chakra-ui.com/pricing · prices as published, excluding tax.

§3

What it does

Style props
Style components through props that map to theme tokens, including responsive values.
CLI snippets
@chakra-ui/cli snippet add copies ready-made composite components into your project.
Theming and color mode
Token-based themes with light and dark mode through next-themes.
Framework guides
Setup guides for Next.js and Vite plus a StackBlitz sandbox.
Chakra UI Pro
Paid collection of 330+ application and marketing blocks on v3.
§4

Strengths and limitations

Strengths

  • Fast to style with props and tokens
  • Accessible components with dark mode support
  • Company-maintained alongside Ark UI and Zag.js
  • Optional paid blocks with a one-time price

Limitations

  • Uses Emotion at runtime today; zero-runtime styling is only a roadmap item
  • React only
  • v2 to v3 was a large migration, and Pro blocks require v3
  • Requires Node.js 20 or newer
§5

Who it suits

Good for

  • React apps that like prop-based styling
  • Teams moving fast on product UI with a theme
  • Buyers wanting prebuilt blocks for a one-time fee

Look elsewhere if

  • Tailwind-first projects
  • Apps avoiding runtime CSS-in-JS
§6

Alternatives to Chakra UI

Tool From Free option Stages
Ant Design Enterprise React component library
— Open source
Material UI (MUI) Styled React component library with paid advanced components
$299/yr Free tier
Nuxt UI Styled Vue component library on Reka UI and Tailwind
— Open source
Radix UI Unstyled accessible React primitives
— Open source
Ark UI Headless multi-framework components
— Free tier
Angular Material Official Material Design components for Angular
— Open source

All UI component libraries →

§7

Questions

Does Chakra UI v3 use Emotion?

Yes. The docs say Chakra UI uses Emotion at runtime, with a planned phased move to zero-runtime styling.

How much is Chakra UI Pro?

The Personal lifetime licence is listed at $299, reduced from $349.

Is Chakra UI free?

Yes, the library is open source; only Chakra UI Pro blocks are paid.

Sources read for this page