LayoutProvider

The LayoutProvider component is a context provider that creates a listener for the Flex and Grid components to track window size, and installs the framework adapters that links and images render through.

Simple setup

Wrap your app with LayoutProvider.

layout.tsx

<LayoutProvider>
  {children}
</LayoutProvider>

Next.js

In a Next.js app, import LayoutProvider from @once-ui-system/core/next. It is the same provider with the Next adapters installed, so SmartLink, Button/Card/ToggleButton with an href, Media, Logo, MegaMenu and Kbar route through next/link and next/image. The export from the package root installs the plain DOM adapters instead: everything still renders, as a plain <a> and <img>, which is why it is easy to miss. npx once-ui-validate-ai-code flags it.

Providers.tsx

import { IconProvider, ToastProvider, ThemeProvider, DataThemeProvider } from "@once-ui-system/core";
import { LayoutProvider } from "@once-ui-system/core/next";

export function Providers({ children }: {
  children: React.ReactNode
}) {
  return (
    <LayoutProvider>
      <ThemeProvider>
        <DataThemeProvider>
          <ToastProvider>
            <IconProvider>
              {children}
            </IconProvider>
          </ToastProvider>
        </DataThemeProvider>
      </ThemeProvider>
    </LayoutProvider>
  );
}

The breakpoints are fixed since 2.0, so LayoutProvider no longer takes a breakpoints prop. See Breakpoints.

API reference

	Type	Default
childrenrequired	React.ReactNode	—

useLayout

useLayout() reads the resolved breakpoint state. Use it when a decision cannot be expressed with the responsive props — mounting a different component per breakpoint, say, rather than styling one. It throws outside a LayoutProvider.

useLayout

const { currentBreakpoint, maxWidth } = useLayout();

// At or below the s breakpoint, render the sheet instead of the popover.
return maxWidth("s") ? <Sheet {...props} /> : <Popover {...props} />;

width is 0 on the server and on the first client render, so branch on it only inside an effect — or branch on currentBreakpoint, which is resolved before paint.

	Type	Default
currentBreakpoint The breakpoint the viewport currently sits in.	xssmlxl	—
width Viewport width in pixels. 0 until measured.	number	0
breakpoints The breakpoint map.	Record<BreakpointKey, number>	DEFAULT_BREAKPOINTS
isBreakpoint True when the viewport is exactly at that breakpoint.	(key: BreakpointKey) => boolean	—
maxWidth True at or below that breakpoint.	(key: BreakpointKey) => boolean	—
minWidth True above that breakpoint.	(key: BreakpointKey) => boolean	—

DEFAULT_BREAKPOINTS

The widths every breakpoint class and useLayout use. Exported for reading; they are not configurable.

DEFAULT_BREAKPOINTS

{ xs: 480, s: 768, m: 1024, l: 1440, xl: Infinity }