useBreakpoint

import { useBreakpoint } from "@servicetitan/anvil2";

function ResponsiveComponent() {
  const breakpoint = useBreakpoint();

  return (
    <div>
      {/* Mobile-first: lg is true for lg, xl, and xxl */}
      {breakpoint?.lg ? (
        <DesktopLayout />
      ) : (
        <MobileLayout />
      )}
    </div>
  );
}

const breakpoint = useBreakpoint();

return (
  <>
    {breakpoint?.lg ? (
      <DesktopComponent />
    ) : (
      <MobileComponent />
    )}
  </>
);

// Disable breakpoint detection for SSR or testing
const breakpoint = useBreakpoint({ disable: true });

// This pattern: "default mobile, override for desktop"
const columns = breakpoint?.lg ? 3 : 1;