Screenshot
An optimized screenshot component that handles theme-aware images, resolution optimization, and graceful loading states.
This specialized screenshot component is designed for displaying product screenshots, app interfaces, and visual content on marketing websites. Its unique value lies in automatic resolution optimization, seamless light/dark mode support with theme-specific assets, and a graceful loading state that maintains layout stability.
Built on top of Next.js Image component, it ensures optimal performance with automatic image optimization, lazy loading, and responsive behavior. The component handles the complexity of theme switching and provides a smooth user experience across all devices and themes.
Installation
Set up project
If you haven't done that already, follow the installation guide before installing your first component.
Install components and dependencies
npx shadcn@latest add "https://launchuicomponents.com/r/screenshot"
This command will:
- install necessary dependencies and add them to
package.json - add necessary components to
components/ui
Start using your component
Your component is ready to use!
Usage
Mobile
Need help?
File a feature request, report a bug, or ask me anything.