shadcn-ui/ui · error · Error

useLayout must be used within a LayoutProvider

Error message

useLayout must be used within a LayoutProvider

What it means

`useLayout` reads `LayoutContext`; `Layout` (the provider component) computes layout state from `forcedLayout`, `storageKey`, `defaultLayout`, `attribute`, and persisted localStorage. When `useContext(LayoutContext) === undefined` the hook throws — consumers (e.g. layout switchers) must receive a concrete layout value.

Source

Thrown at apps/v4/hooks/use-layout.tsx:38

}

const isServer = typeof window === "undefined"
const LayoutContext = React.createContext<LayoutProviderState | undefined>(
  undefined
)

const saveToLS = (storageKey: string, value: string) => {
  try {
    localStorage.setItem(storageKey, value)
  } catch {
    // Unsupported
  }
}

const useLayout = () => {
  const context = React.useContext(LayoutContext)
  if (context === undefined) {
    throw new Error("useLayout must be used within a LayoutProvider")
  }
  return context
}

const Layout = ({
  forcedLayout,
  storageKey = "layout",
  defaultLayout = "full",
  attribute = "class",
  value,
  children,
}: LayoutProviderProps) => {
  const [layout, setLayoutState] = React.useState<Layout>(() => {
    if (isServer) return defaultLayout
    try {
      const saved = localStorage.getItem(storageKey)
      if (saved === "fixed" || saved === "full") {
        return saved

View on GitHub (pinned to efac598707)

Solutions

1. Wrap the tree (usually at the app root) in `<Layout storageKey="layout" defaultLayout="full">`.
2. Move any layout-aware component below the `<Layout>` wrapper.
3. Decorate tests with `<Layout>` (and stub localStorage if needed).

Example fix

// before
<LayoutSwitcher />

// after
<Layout storageKey="layout" defaultLayout="full">
  <LayoutSwitcher />
</Layout>

render(<Layout storageKey="layout" defaultLayout="full">{<LayoutSwitcher/>}</Layout>)

import React from "react"
import { LayoutContext } from "@/hooks/use-layout"
const hasLayout = () => React.useContext(LayoutContext) !== undefined

try { useLayout() } catch (e) { if (e.message.includes("LayoutProvider")) {/*mount <Layout>*/} throw e }

When it happens

Trigger: Calling `useLayout()` in a component not under `<Layout>`. Notable: the provider persists to localStorage and silently swallows storage errors (`// Unsupported`), but that does NOT cause this throw — the throw is purely the missing-provider case.

Common situations: Mounting a layout-aware component in a route segment above the `<Layout>` wrapper; SSR where the provider is conditionally skipped; tests rendering a layout consumer in isolation.

Related errors

• usePreviewOverride must be used within a PreviewOverrideProv
• useHistory must be used within HistoryProvider
• useLocks must be used within LocksProvider
• usePreviewOverride must be used within a TypesetPreviewOverr
• useHistory must be used within TypesetHistoryProvider

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