CADENCE
Find Your Stride
Find Your Stride
Test hooks and components for responsive design
Real-time responsive information
Breakpoint
Width
Height
Orientation
Device Type
📵 Not visible on mobile devices
📵 Not visible on tablet devices
📵 Not visible on desktop devices
Show content at specific breakpoints and above
Visible on small screens and up (≥640px)
Hide content at specific breakpoints and above
Hidden on medium screens and up (≥768px)
Hidden on large screens and up (≥1024px)
Container with different padding at each breakpoint
Responsive Padding
Resize your window to see padding change:
Rotate your device to see orientation change
📱 Portrait Mode
Current: 0x0
Import and use responsive hooks and components
Hooks:
import {
useBreakpoint,
useWindowSize,
useOrientation,
useIsMobile,
useIsTablet,
useIsDesktop,
} from '@/hooks/use-responsive'
const breakpoint = useBreakpoint() // 'sm' | 'md' | 'lg' | 'xl' | '2xl'
const { width, height } = useWindowSize()
const orientation = useOrientation() // 'portrait' | 'landscape'
const isMobile = useIsMobile()
const isTablet = useIsTablet()
const isDesktop = useIsDesktop()Components:
import {
ShowAt,
HideAt,
ResponsiveContainer,
MobileOnly,
TabletOnly,
DesktopOnly,
} from '@/components/responsive'
<ShowAt breakpoint="md">Show on medium+</ShowAt>
<HideAt breakpoint="lg">Hide on large+</HideAt>
<MobileOnly>Mobile content</MobileOnly>
<DesktopOnly>Desktop content</DesktopOnly>