# Chakraui

> Chakra UI accessible React components. Use for React UI.

- Skill: `g1joshi/chakraui` (Agent Skill)
- Install (CLI): `npx skillmds@latest add g1joshi/chakraui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/g1joshi/chakraui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: G1Joshi (https://skillmd.com/u/g1joshi)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/g1joshi/chakraui

---


# Chakra UI

Chakra UI v3 (2025) moves to a **Zero-runtime** engine (Panda CSS under the hood) to solve performance issues, while keeping the developer experience of style props.

## When to Use

- **Speed**: Developing UI with style props (`<Box mt={4} />`) is incredibly fast.
- **Accessibility**: WAI-ARIA compliant out of the box.
- **Customizability**: Easier to customize than MUI.

## Core Concepts

### Style Props

Passing CSS as props. `bg="red.500"`.

### Polymorphism

`as` prop. `<Button as="a" href="...">`.

### Hooks

`useColorMode`, `useDisclosure` (for modals).

## Best Practices (2025)

**Do**:

- **Use v3**: Significant performance boost over v2 (Emotion-based).
- **Use `HStack` / `VStack`**: Great abstractions for Flexbox layout.
- **Extend Theme**: Define your colors/fonts in a theme file.

**Don't**:

- **Don't hardcode hex colors**: Use theme tokens (`blue.500`).

## References

- [Chakra UI Documentation](https://chakra-ui.com/)