useBreakpoints

While Setup skill mounts the required providers, the BreakpointsProvider plus useBreakpoints are ViraUI-specific and optional — add them when your app needs viewport-conditional React trees.

Prefer CSS @media or container queries when you only need layout shifts without branching the tree.

• Defaults are hardcoded em lengths:
  • extra-small: 30em
  • small: 48em
  • medium: 60em
  • large: 80em
  • extra-large: 100em

Wrap a Client Component subtree ('use client' in Next.js). Call useBreakpoints only under the provider. Prefer useBreakpoints('small') when you only need one flag so unrelated breakpoint flips skip work; call useBreakpoints() with no argument when you need every match flag.

'use client';

import { Stack, BreakpointsProvider, useBreakpoints } from '@viraui/react';

function ResponsiveNav() {
  // `small` matches at min-width 48em and above
  const largeScreen = useBreakpoints('small');

  return (
    <Stack
      render={<nav aria-label="Primary" />}
      direction={largeScreen ? 'row' : 'column'}
    >
      <a href="/">Home</a>
      <a href="/docs">Docs</a>
      <a href="/pricing">Pricing</a>
    </Stack>
  );
}

export function App({ children }: { children: React.ReactNode }) {
  return (
    <BreakpointsProvider>
      <ResponsiveNav />
      {children}
    </BreakpointsProvider>
  );
}

Pass a custom map when you need different names or thresholds — it replaces the defaults entirely:

<BreakpointsProvider breakpoints={{ compact: '20em', wide: '50em' }}>
  {children}
</BreakpointsProvider>

Full API detail: @viraui/react/specs → breakpoints units. For agent compose, load viraui-design.

Base UI utilities

ViraUI builds on Base UI. For Base UI’s own helpers — direction (DirectionProvider), focus management, portals, and similar — use base-ui.com.