chakra-ui-builder

Install @chakra-ui/react and @emotion/react, run npx @chakra-ui/cli snippet add to generate the provider, then wrap your root layout with the Provider component. Add suppressHydrationWarning to the html tag to prevent color-mode hydration mismatches.

Use Field.Root to wrap each input, which wires up the label, error text, and help text automatically. Combine it with Input, use the invalid prop for error states, and use disabled rather than the v2 isDisabled prop.

Chakra UI v3 replaces extendTheme with defineConfig and createSystem, and styleConfig with defineRecipe and defineSlotRecipe. Semantic tokens support per-color-mode values, and colorScheme is renamed to colorPalette.

Yes, through the separate @chakra-ui/charts package, which requires recharts as a peer dependency. It provides BarList and BarSegment components plus a Chart.Root wrapper that integrates with Recharts for line, area, bar, and pie charts.

Unstyled components almost always mean the app is not wrapped in the Chakra Provider. Verify the Provider import path and that it wraps your component tree in the root layout or entry file.

Use a recipe when a component has meaningful style variants reused across the project, and a slot recipe for multi-part components like cards. Inline props are fine for one-off styles that appear only once.