AiKitProvider

Apply the kit theme to a subtree. Render it inside your MantineProvider around the kit components; host components outside it keep the host theme. Settings: accent sets the primary color (gray, blue, indigo, violet, grape, pink), radius sets the default radius (sharp, default, round), density sets control heights and paddings (default, compact), colorScheme switches the color scheme of the whole app through Mantine. theme merges Mantine overrides on top of the kit theme, and tokens sets --ae-* variables for the subtree (keys without the --ae- prefix); tokens win over settings. The provider re-declares the CSS variables on its own element and on portals it opens, so menus and modals inside match. persistKey saves changes made through useAiKitTheme().setSettings to localStorage and restores them. useAiKitTheme returns the effective settings, the defaults from props, setSettings, reset and the resolved aiKit theme values; it throws outside a provider, and useOptionalAiKitTheme returns null instead. Wrap host UI placed inside a kit subtree in AiKitHostScope to give it the host theme back. See Theming (/docs/theming) for nesting and token details.