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.
React useScreen Hook preview
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.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this hook for you — no copy-paste, no CLI:
use shadcnio to install the use-screen hook into my projectRelated 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.