Breakpoint Display
Open in

Minimum

Fixed Position (Default)
Fixed at the top of the viewport - check the top of your screen

The breakpoint display at the top of the screen shows the current breakpoint

Reactfixed-position.tsx
// Default behavior - fixed at top of viewport// Uses default Tailwind breakpoints: sm, md, lg, xl, 2xl<BreakpointDisplay />
Absolute Position with Extra Breakpoints
Positioned relative to nearest positioned ancestor with custom breakpoints

Minimum

Reactabsolute-position.tsx
// Absolute positioning with extra breakpoints// Result: xxs, xs, sm, md, lg, xl, 2xl, 3xl<div className="relative">  <BreakpointDisplay     position="absolute"     extraBreakpoints={["xxs", "xs", "3xl"]}   /></div>
Relative Position
Displays inline with default breakpoints

Minimum

Reactrelative-position.tsx
// Relative positioning - displays inline<BreakpointDisplay position="relative" />

Features

  • Real-time display of current Tailwind breakpoint
  • Support for all standard Tailwind breakpoints (sm, md, lg, xl, 2xl)
  • Optional extra breakpoints (xxs, xs, 3xl)
  • Multiple positioning options (fixed, absolute, relative)
  • Automatic sorting by semantic breakpoint order
  • Smart visibility management based on active breakpoints
  • Lightweight and non-interactive (pointer-events-none)
  • Perfect for development and debugging responsive layouts
  • Fully typed with TypeScript

Component Props

BreakpointDisplay

  • position - "fixed" | "absolute" | "relative" (default: "fixed") - Positioning strategy
  • extraBreakpoints - Array<"xxs" | "xs" | "3xl"> - Additional breakpoints beyond defaults
  • className - string

Default Breakpoints

The component uses Tailwind's standard breakpoints by default:

  • sm - 640px
  • md - 768px
  • lg - 1024px
  • xl - 1280px
  • 2xl - 1536px

Extra breakpoints (xxs, xs, 3xl) can be added via the extraBreakpoints prop. The actual pixel values for these are defined in your Tailwind configuration.