Skip to main content
/mantle

Breakpoints

Responsive breakpoints for building adaptive layouts.

Live demo

Current Breakpoint

Current breakpoint:default

Below Extra Extra Small?

Below 2xs (360px):false

Below Extra Small?

Below xs (480px):false

Below Small?

Below sm (640px):false

Below Medium?

Below md (768px):false

Below Large?

Below lg (1024px):false

Resize your browser window to see the values change in real-time.

Breakpoint values

There are seven breakpoints by default, inspired by common device resolutions:

Breakpoint prefixMinimum widthCSS
default0rem (0px)No media query
2xs22.5rem (360px)@media (width >= 22.5rem) { ... }
xs30rem (480px)@media (width >= 30rem) { ... }
sm40rem (640px)@media (width >= 40rem) { ... }
md48rem (768px)@media (width >= 48rem) { ... }
lg64rem (1024px)@media (width >= 64rem) { ... }
xl80rem (1280px)@media (width >= 80rem) { ... }
2xl96rem (1536px)@media (width >= 96rem) { ... }

xs (480px) is wider than most phones, so a class with only an xs: value applies nothing on a phone. Give an unprefixed base value first, then override it at the breakpoint: flex-col xs:flex-row.

useBreakpoint hook

The useBreakpoint hook returns the current breakpoint based on the viewport width. It efficiently tracks all breakpoints and returns the largest one that currently matches.

import { useBreakpoint } from "@ngrok/mantle/hooks"; function ResponsiveComponent() {	const breakpoint = useBreakpoint(); 	return (		<div>			<p>Current breakpoint: {breakpoint}</p>			{breakpoint === "lg" && <p>This only shows on large screens and above!</p>}		</div>	);}

Features

  • Performance optimized: Uses a single subscription for all breakpoint changes
  • SSR compatible: Returns default during server-side rendering
  • Real-time updates: Automatically updates when the viewport size changes
  • TypeScript support: Fully typed with autocompletion for all breakpoints

Return value

Returns a Breakpoint type that can be one of: "default", "2xs", "xs", "sm", "md", "lg", "xl", or "2xl".

useIsBelowBreakpoint hook

The useIsBelowBreakpoint hook returns true if the current viewport width is below the specified breakpoint. Perfect for mobile-first responsive design patterns.

import { useIsBelowBreakpoint } from "@ngrok/mantle/hooks"; function ResponsiveSidebar() {	const isMobile = useIsBelowBreakpoint("md"); 	return (		<aside className={isMobile ? "mobile-sidebar" : "desktop-sidebar"}>			{isMobile ? <MobileNav /> : <DesktopNav />}		</aside>	);}

Parameters

Accepts a TailwindBreakpoint which can be one of: "2xs", "xs", "sm", "md", "lg", "xl", or "2xl".

Common use cases

  • Mobile detection: useIsBelowBreakpoint("md") for mobile-first layouts
  • Conditional rendering: Show/hide components based on screen size
  • Dynamic styling: Apply different CSS classes for mobile vs desktop
  • Component adaptation: Switch between mobile and desktop component variants