Function: ChakraProvider()

ChakraProvider(__namedParameters): Element

Defined in: packages/ui/src/chakra/ChakraThemeProvider.tsx:188

Opt-in Chakra UI provider that inherits design tokens from the parent theme-ui ThemeProvider.

Must be rendered as a child of ThemeProvider so that useThemeUI() can read the active theme (unless themeUITheme prop is provided).

This component automatically converts theme-ui tokens to Chakra UI v3 system format, allowing seamless integration between both systems.

Parameters

__namedParameters

ChakraThemeProviderProps

Returns

Element

Examples

import { ThemeProvider } from '@ttoss/ui';
import { ChakraProvider } from '@ttoss/ui/chakra';

function App() {
  return (
    <ThemeProvider>
      <ChakraProvider>
        <Button colorScheme="blue">Click me</Button>
      </ChakraProvider>
    </ThemeProvider>
  );
}

<ChakraProvider themeUITheme={customTheme}>
  <Button>Click me</Button>
</ChakraProvider>

<ChakraProvider
  overrides={{
    theme: {
      slotRecipes: {
        steps: customStepsRecipe,
      },
    },
  }}
>
  <Steps.Root>...</Steps.Root>
</ChakraProvider>