shadcn-ui/ui · error · Error

useThemeConfig must be used within an ActiveThemeProvider

Error message

useThemeConfig must be used within an ActiveThemeProvider

What it means

`useThemeConfig` reads `ThemeContext` (created via `createContext` without an explicit default). The provider stores `{ activeTheme, setActiveTheme }` (setActiveTheme memoized on activeTheme). When `useContext(ThemeContext) === undefined`, the hook throws — consumers must always receive a concrete active theme.

Source

Thrown at apps/v4/components/active-theme.tsx:53

        document.body.classList.remove(className)
      })
    document.body.classList.add(`theme-${activeTheme}`)
    if (activeTheme.endsWith("-scaled")) {
      document.body.classList.add("theme-scaled")
    }
  }, [activeTheme])

  return (
    <ThemeContext.Provider value={{ activeTheme, setActiveTheme }}>
      {children}
    </ThemeContext.Provider>
  )
}

export function useThemeConfig() {
  const context = useContext(ThemeContext)
  if (context === undefined) {
    throw new Error("useThemeConfig must be used within an ActiveThemeProvider")
  }
  return context
}

View on GitHub (pinned to efac598707)

Solutions

Place `<ActiveThemeProvider>` high enough in the tree (typically the root layout) so every `useThemeConfig()` consumer is a descendant.
If a root-level component needs the theme, either move it under the provider or lift the provider above it.
Wrap test renders in `<ActiveThemeProvider>`.

Example fix

// before
<ThemeSwitch />  // rendered above ActiveThemeProvider

// after
<ActiveThemeProvider>
  <ThemeSwitch />
</ActiveThemeProvider>

Defensive patterns

Strategy: type-guard

Validate before calling

render(<ActiveThemeProvider>{<ThemedComponent/>}</ActiveThemeProvider>)

Type guard

import { useContext } from "react"
import { ThemeContext } from "@/components/active-theme"
function hasThemeConfig(): boolean {
  return useContext(ThemeContext) !== undefined
}

Try / catch

try { useThemeConfig() } catch (e) { if (e.message.includes("ActiveThemeProvider")) {/*mount provider*/} throw e }

Prevention

Mount ActiveThemeProvider at the root layout, above any themed component.
Never render ThemeSwitch/useThemeConfig consumers above the provider.
Add ActiveThemeProvider to global story/test decorators.

When it happens

Trigger: Calling `useThemeConfig()` in a component rendered outside `<ActiveThemeProvider>`, e.g. a header/theme-switch mounted in a root layout that sits above the provider, or a page-level component used before the provider wraps the tree.

Common situations: Moving ActiveThemeProvider from the root layout into a nested segment; SSR/tree-shaking stripping the provider; testing a themed component without the provider.

Related errors

AI-assisted analysis of shadcn-ui/ui@efac598707 (2026-08-12). Data as JSON: /api/errors/9b7a04a77cb19a1a. Report an issue: GitHub.