Utilities

Setup mounts the Dialog / Tooltip / Toast overlay shell. Everything on this page is optional — add it only when the app needs that behavior.

Breakpoints

BreakpointsProvider plus useBreakpoints swap or hide React markup when the viewport crosses named min-width thresholds. 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.

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

function Sidebar() {
  const isLarge = useBreakpoints('large');
  return isLarge ? <nav>Full nav</nav> : <nav>Compact nav</nav>;
}

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

Pass a custom map when product thresholds differ:

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

useBreakpoints() returns every match flag. Prefer useBreakpoints('small') when you only need one boolean so unrelated breakpoint flips skip work.

Deep API: @viraui/react/specs → breakpoints units. Agent compose: viraui-design.

RTL direction

For RTL menus and popups, wrap with Base UI DirectionProvider (direction="rtl") and set dir="rtl" on a portal ancestor (usually html). See @viraui/react/specs/foundation/bootstrap.xml.