useBreakpoint

Reactive viewport breakpoints aligned with Tailwind --breakpoint-* tokens.

Introduction

useBreakpoint exposes reactive viewport state aligned with Tailwind --breakpoint-* tokens. Read name for the active band, width / height in CSS pixels, and mobile for a simple below-threshold check. Comparison helpers such as greaterOrEqual() mirror Tailwind sm: semantics.

Use the framework selector in the site header to switch between React and Vue.

Import

import { useBreakpoint } from "@bridge-ui/vue";

import { useBreakpoint } from "@bridge-ui/react";

Basic usage

Inspect the active band, viewport size, and comparison helpers in real time as the window resizes.

Active band: xs (0px)

mobile: true

≥ lg: false

between sm–lg: false

Active band: xs (0px)

mobile: true

≥ lg: false

between sm–lg: false

Pair useBreakpoint with Modal to choose a different align per viewport—for example a bottom sheet on mobile and a centered dialog from the mobile breakpoint up.

Global defaults

Set shared breakpoint defaults on BridgeUIProvider (React) or createBridgeUI() (Vue). Hook options override the provider when passed to useBreakpoint().

app.use(
  createBridgeUI({
    global: {
      mobileBreakpoint: "md",
      breakpoints: { "3xl": "120rem" },
    },
  }),
);

<BridgeUIProvider
  global={{
    mobileBreakpoint: "md",
    breakpoints: { "3xl": "120rem" },
  }}
>
  <App />
</BridgeUIProvider>

Per-call overrides:

useBreakpoint({
  mobileBreakpoint: "lg",
  breakpoints: { sm: "30rem" },
});

Options

Option	Type	Default	Description
mobileBreakpoint	string	global / "sm"	Threshold for mobile
breakpoints	Record<string, string>	global / {}	Extra or overridden CSS lengths (40rem, …)

API

Member	Type	Description
name	string	Active band (xs or a breakpoint key)
width	number	Viewport width (px)
height	number	Viewport height (px)
mobile	boolean	width < mobileBreakpoint
thresholds	Record<string, number>	Resolved min-widths (px)
lessThan(name)	(name: string) => boolean	width < threshold
lessOrEqual(name)	(name: string) => boolean	width <= threshold
greaterThan(name)	(name: string) => boolean	width > threshold
greaterOrEqual(name)	(name: string) => boolean	width >= threshold (Tailwind sm: semantics)
between(min, max)	(min: string, max: string) => boolean	>= min and < max

Note

On the server (and before hydration), width and height are 0 and mobile is true.

Vue reactivity

useBreakpoint() returns a reactive object—read properties on the object (do not destructure helpers) so updates stay reactive in script.

Breakpoints are read from --breakpoint-* (exported via @theme static in Bridge themes). Custom names work when the CSS variable exists or is passed in breakpoints.

Modal, Drawer