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.

<script setup lang="ts">
import { useBreakpoint } from "@bridge-ui/vue";

const breakpoint = useBreakpoint();
</script>

<template>
  <div class="flex flex-col gap-2 text-sm text-dark-700 dark:text-dark-300">
    <p>
      Active band: <strong>{{ breakpoint.name }}</strong> ({{
        breakpoint.width
      }}px)
    </p>
    <p>
      mobile: <strong>{{ breakpoint.mobile }}</strong>
    </p>
    <p>
      ≥ lg: <strong>{{ breakpoint.greaterOrEqual("lg") }}</strong>
    </p>
    <p>
      between sm–lg:
      <strong>{{ breakpoint.between("sm", "lg") }}</strong>
    </p>
  </div>
</template>

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

export default function UseBreakpointBasic() {
  const breakpoint = useBreakpoint();

  return (
    <div className="flex flex-col gap-2 text-sm text-dark-700 dark:text-dark-300">
      <p>
        Active band: <strong>{breakpoint.name}</strong> ({breakpoint.width}px)
      </p>
      <p>
        mobile: <strong>{String(breakpoint.mobile)}</strong>
      </p>
      <p>
        ≥ lg: <strong>{String(breakpoint.greaterOrEqual("lg"))}</strong>
      </p>
      <p>
        between sm–lg: <strong>{String(breakpoint.between("sm", "lg"))}</strong>
      </p>
    </div>
  );
}

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.

<script setup lang="ts">
import { ref } from "vue";

import { useBreakpoint } from "@bridge-ui/vue";
import { Button } from "@bridge-ui/vue/Components/Button";
import { Card } from "@bridge-ui/vue/Components/Card";
import { Modal } from "@bridge-ui/vue/Components/Modal";

const open = ref(false);
const breakpoint = useBreakpoint();
</script>

<template>
  <div class="w-full">
    <Button v-on:click="open = true">Open responsive modal</Button>

    <Modal
      v-model="open"
      :align="breakpoint.mobile ? 'bottom-center' : 'middle-center'"
    >
      <Card title="Responsive align">
        Bottom sheet on mobile, centered from the mobile breakpoint up.
      </Card>
    </Modal>
  </div>
</template>

import { useState } from "react";

import { useBreakpoint } from "@bridge-ui/react";
import { Button } from "@bridge-ui/react/Components/Button";
import { Card } from "@bridge-ui/react/Components/Card";
import { Modal } from "@bridge-ui/react/Components/Modal";

export default function UseBreakpointResponsiveModal() {
  const [open, setOpen] = useState(false);
  const breakpoint = useBreakpoint();

  return (
    <div className="w-full">
      <Button onClick={() => setOpen(true)}>Open responsive modal</Button>

      <Modal
        show={open}
        onShowChange={setOpen}
        align={breakpoint.mobile ? "bottom-center" : "middle-center"}
      >
        <Card title="Responsive align">
          Bottom sheet on mobile, centered from the mobile breakpoint up.
        </Card>
      </Modal>
    </div>
  );
}

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