Chakra UI

# Chakra UI — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Chakra Systems. "Chakra UI" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Chakra UI
**Owner:** Chakra Systems
**Official documentation:** https://chakra-ui.com/
**Visual character:** Composable comfort: friendly rounded corners, a full 50-900 palette for every hue, and props-as-styling ergonomics that made theming mainstream.

---

## Summary

Composable, accessible React components with style-prop ergonomics.

_Confidence: high. Values are drawn from well-documented public token references._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Blue 500 / Primary | `#3182ce` | `--chakra-colors-blue-500` | Default primary actions (v2) |
| Gray 800 Text | `#1a202c` | `--chakra-colors-gray-800` | Primary text |
| White | `#ffffff` | `--chakra-colors-white` | Surfaces |
| Gray 50 | `#f7fafc` | `--chakra-colors-gray-50` | Subtle background |
| Gray 200 Border | `#e2e8f0` | `--chakra-colors-gray-200` | Borders |
| Red 500 Error | `#e53e3e` | `--chakra-colors-red-500` | Errors |
| Green 500 Success | `#38a169` | `--chakra-colors-green-500` | Success |
| Teal 500 Accent | `#319795` | `--chakra-colors-teal-500` | Secondary accent |

## Typography

- **Body:** System stack — weights 400, 500, 600, 700 — `-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif`
- **Mono:** SFMono — weights 400 — `SFMono-Regular, Menlo, Monaco, Consolas, monospace`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| 4xl | `36px` | `40px` |
| 3xl | `30px` | `36px` |
| 2xl | `24px` | `32px` |
| xl | `20px` | `28px` |
| md | `16px` | `24px` |
| sm | `14px` | `20px` |

## Spacing

Base unit: `4px`

Scale: `4px` · `8px` · `12px` · `16px` · `20px` · `24px` · `32px` · `40px`

## Corner radius

| Name | Value |
| --- | --- |
| sm | `2px` |
| md | `6px` |
| lg | `8px` |
| full | `9999px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| sm | `0 1px 2px 0 rgba(0,0,0,0.05)` |
| md | `0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)` |

## Motion

| Name | Value |
| --- | --- |
| fast | `150ms` |
| normal | `200ms` |

## Quick start (CSS)

```css
/* Chakra UI — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://chakra-ui.com/ */

:root {
  /* Color */
  --chakra-colors-blue-500: #3182ce; /* Default primary actions (v2) */
  --chakra-colors-gray-800: #1a202c; /* Primary text */
  --chakra-colors-white: #ffffff; /* Surfaces */
  --chakra-colors-gray-50: #f7fafc; /* Subtle background */
  --chakra-colors-gray-200: #e2e8f0; /* Borders */
  --chakra-colors-red-500: #e53e3e; /* Errors */
  --chakra-colors-green-500: #38a169; /* Success */
  --chakra-colors-teal-500: #319795; /* Secondary accent */

  /* Typography */
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Type scale */
  --text-4xl: 36px /* line-height 40px */;
  --text-3xl: 30px /* line-height 36px */;
  --text-2xl: 24px /* line-height 32px */;
  --text-xl: 20px /* line-height 28px */;
  --text-md: 16px /* line-height 24px */;
  --text-sm: 14px /* line-height 20px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* Radius */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 9999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);

  /* Motion */
  --motion-fast: 150ms;
  --motion-normal: 200ms;
}
```

## Origin

Sage Adebayo and the Chakra team released v0 in 2019. Chakra became one of the most popular accessible React component libraries — heavily influenced by Tailwind ergonomics but as a runtime CSS-in-JS library with a token-based theme.

## Governance

Chakra Systems (the company behind Chakra UI) maintains the project. Active community. v3 (2024+) introduced a Panda-CSS-based static engine, replacing the runtime Emotion approach.

## Known for

- Style props — `<Box p={4} bg='gray.100' />` brought Tailwind-like rapid styling to a React component library.
- Strong accessibility defaults — focus management, ARIA, and keyboard interactions handled out of the box.
- Theme system that keeps tokens, recipes (component variants), and breakpoints together in one config.

## Underrated

- The Chakra `useDisclosure` hook pattern (returning open/close handlers) became a community-wide convention.
- Chakra's documented dark-mode story was one of the cleanest in 2020-era React libraries and remains a useful reference.

## Watch out for

- v2 → v3 is a substantial migration; the Panda-CSS underpinning changes how styles are authored.
- Runtime CSS-in-JS in earlier versions had a perf cost on first paint that newer static-extraction engines fix.

## Components worth studying

- **Modal / AlertDialog** — Focus-trapped overlay primitives with sensible default behavior.
- **FormControl** — Composes Label + Input + Helper + Error with a single source of truth for the relationship.
- **Stack / HStack / VStack** — Spacing utilities that turned into a community-wide convention.

## When to choose Chakra UI

Pick Chakra when you want a fast-start React library with sensible accessibility defaults and a light-touch theme system. For maximum performance or cleanest static output, evaluate v3 (Panda) carefully — earlier runtime versions are no longer the right baseline.

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Chakra UI by Chakra Systems — Composable, accessible React components with style-prop ergonomics. Character: Composable comfort: friendly rounded corners, a full 50-900 palette for every hue, and props-as-styling ergonomics that made theming mainstream. Use a primary colour near #3182ce, the typeface "System stack" (or a close equivalent), corner radius around 2px, a spacing rhythm on a 4px base. Lean into what it's known for: Style props — `<Box p={4} bg='gray.100' />` brought Tailwind-like rapid styling to a React component library. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official references

- [Chakra UI docs](https://chakra-ui.com/)
- [Chakra on GitHub](https://github.com/chakra-ui/chakra-ui)
- [Chakra v3 release notes](https://chakra-ui.com/getting-started/migration)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/chakra-ui) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._