Shadcn.io is not affiliated with official shadcn/ui
React useScreen Hook
React useScreen hook for accessing window.screen properties. Device dimensions, color depth, orientation. SSR safe.
Access the full Screen API in React with useScreen. Returns the window.screen object with all device display properties that update on resize. Get physical screen dimensions, available workspace size, color depth, pixel depth, and screen orientation. Optional debounce delay for resize events. Returns undefined during SSR and optionally until client hydration. Provides stable screen object reference with all standard Screen interface properties. Perfect for responsive design decisions, device capability detection, orientation-aware layouts, or display quality checks. Works with Next.js App Router.
React useScreen Hook preview
Installation
Related Components
React useWindowSize Hook
Track window dimensions
React useMediaQuery Hook
Respond to CSS breakpoints
React useResizeObserver Hook
Track element size changes
React useIsClient Hook
Check if running on client
React useDarkMode Hook
Dark mode with persistence
React useOrientation Hook
Track device orientation
FAQ
Was this page helpful?
Sign in to leave feedback.