Chakra UI v3 Patterns

Quick Guide: Chakra UI v3 is a composable, accessible React component library. Set up with createSystem(defaultConfig) and ChakraProvider. Style via props (bg, p, color), not className. Components are composable by default (Dialog.Root, Dialog.Content). Theme with design tokens and recipes via defineConfig. Dark mode uses semantic tokens (bg.subtle, fg.muted) and _dark condition. Removed framer-motion and @emotion/styled deps from v2 -- uses CSS animations and recipes instead.

<critical_requirements>

CRITICAL: Before Using This Skill

All code must follow project conventions in CLAUDE.md (kebab-case, named exports, import ordering, import type, named constants)

(You MUST wrap your app with ChakraProvider value={system} where system is created via createSystem(defaultConfig))

(You MUST use composable component patterns (Dialog.Root, Dialog.Content) -- v3 removed closed component APIs)

(You MUST use style props (bg, p, color) or the chakra factory for styling -- not raw className strings)

(You MUST prefer semantic tokens (bg.subtle, fg.muted) or _dark condition for dark mode -- avoid useColorModeValue when tokens suffice)