Breakpoint Viewer

A helpful devtool that shows which breakpoint you are currently on.

breakpoint viewer demo

breakpoint-viewer.tsx

export function BreakpointViewer() {
  return (
    <div
      title="Current breakpoint"
      className="fixed bottom-3 left-24 z-50 rounded-md bg-primary p-1.5 px-2 text-primary-foreground"
    >
      <span className="inline-block sm:hidden">XS</span>
      <span className="hidden sm:inline-block md:hidden">SM</span>
      <span className="hidden md:inline-block lg:hidden">MD</span>
      <span className="hidden lg:inline-block xl:hidden">LG</span>
      <span className="hidden xl:inline-block 2xl:hidden">XL</span>
      <span className="hidden 2xl:inline-block">2XL</span>
    </div>
  );
}

Usage

// layout.tsx or your project index file

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
          {children}
          {process.env.NODE_ENV === "development" && (
              <BreakpointViewer />
          )}
      </body>
    </html>
  );
}

Loved this post?

Comments

Interested in
working
with me?