diff --git a/products/catalyst/bootstrap/ui/src/shared/lib/useBreakpoint.ts b/products/catalyst/bootstrap/ui/src/shared/lib/useBreakpoint.ts
new file mode 100644
index 00000000..8967688c
--- /dev/null
+++ b/products/catalyst/bootstrap/ui/src/shared/lib/useBreakpoint.ts
@@ -0,0 +1,20 @@
+import { useState, useEffect } from 'react'
+
+export type Breakpoint = 'mobile' | 'tablet' | 'desktop'
+
+function getBreakpoint(): Breakpoint {
+  if (typeof window === 'undefined') return 'desktop'
+  if (window.innerWidth < 768)  return 'mobile'
+  if (window.innerWidth < 1080) return 'tablet'
+  return 'desktop'
+}
+
+export function useBreakpoint(): Breakpoint {
+  const [bp, setBp] = useState<Breakpoint>(getBreakpoint)
+  useEffect(() => {
+    const handler = () => setBp(getBreakpoint())
+    window.addEventListener('resize', handler)
+    return () => window.removeEventListener('resize', handler)
+  }, [])
+  return bp
+}