Skip to content

ResponsiveContainer

SM · 950B gzip budget

Container that adapts layout based on breakpoint.

Category
Media & layout
Budget
sm, single-purpose control
External runtime
React / React DOM only
axe fixtureSSR rendersource scanbundle budget

Preview

Live fixture
Preview locale
Content at sm

Try the component here. Locale-aware formatting and direction follow the selected language; example content and labels are not automatically translated. Overlay demos use interactive launchers.

Install

npx shadcn@latest add https://gear5-ui.vercel.app/r/responsive-container.json

Copies the source into your project.

New here? Set up Tailwind and import aliases first →

Source & props

Edit on GitHub ↗

Prop types and inline documentation are included below. This is repository source; the installer rewrites shared imports for your project.

"use client";

import React, { useCallback, useEffect, useState } from "react";

type Breakpoint = "sm" | "md" | "lg" | "xl" | "2xl";

export interface ResponsiveContainerProps {
  children: (breakpoint: Breakpoint) => React.ReactNode;
  className?: string;
}

const breakpoints: { key: Breakpoint; min: number }[] = [
  { key: "2xl", min: 1536 },
  { key: "xl", min: 1280 },
  { key: "lg", min: 1024 },
  { key: "md", min: 768 },
  { key: "sm", min: 640 },
];

function getBreakpoint(width: number): Breakpoint {
  for (const bp of breakpoints) {
    if (width >= bp.min) return bp.key;
  }
  return "sm";
}

export function ResponsiveContainer({
  children,
  className = "",
}: ResponsiveContainerProps) {
  const [breakpoint, setBreakpoint] = useState<Breakpoint>(() =>
    typeof window !== "undefined" ? getBreakpoint(window.innerWidth) : "sm"
  );

  const update = useCallback(() => {
    setBreakpoint(getBreakpoint(window.innerWidth));
  }, []);

  useEffect(() => {
    window.addEventListener("resize", update);
    return () => window.removeEventListener("resize", update);
  }, [update]);

  return (
    <div className={className}>
      {children(breakpoint)}
    </div>
  );
}

What CI checks

Quality contract
  • Bundled, minified and gzipped against its tier budget
  • Audited by axe in the state previewed above
  • Rendered through react-dom/server with no browser globals
  • Scanned for network calls, dangerous sinks, and unguarded animation
← All components