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 prefix	Minimum width	CSS
`default`	0rem (0px)	No media query
`2xs`	22.5rem (360px)	`@media (width >= 22.5rem) { ... }`
`xs`	30rem (480px)	`@media (width >= 30rem) { ... }`
`sm`	40rem (640px)	`@media (width >= 40rem) { ... }`
`md`	48rem (768px)	`@media (width >= 48rem) { ... }`
`lg`	64rem (1024px)	`@media (width >= 64rem) { ... }`
`xl`	80rem (1280px)	`@media (width >= 80rem) { ... }`
`2xl`	96rem (1536px)	`@media (width >= 96rem) { ... }`

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