Chakra UI v3 Patterns

Quick Guide: Chakra UI v3 styles through props (bg, p, color) rather than class names, and composes every complex component from parts (Dialog.Root, Dialog.Content). It dropped framer-motion and @emotion/styled — CSS animations and recipes replaced them — and every v2 closed component API (isOpen, useDisclosure, extendTheme) is gone.

Detailed Resources:

• examples/core.md — provider setup, layout components, typography, buttons, forms, the chakra factory, asChild
• examples/theming.md — custom tokens, semantic tokens, recipes, slot recipes, dark-mode setup
• examples/composable-components.md — Dialog, Menu, Popover, Drawer, Tabs and their controlled forms
• reference.md — style-prop and semantic-token tables, breakpoints, the v2→v3 migration reference

<critical_requirements>

Before writing Chakra UI code

Build a system with createSystem(defaultConfig, config) and hand it to ChakraProvider value={system}. Components read their tokens, recipes and conditions from that system, and render unstyled without it.