Responsive Preview
The Responsive Preview component allows you to test and demonstrate how components render at different viewport sizes. This is essential for ensuring your components work correctly across mobile, tablet, and desktop screens.
Features
Section titled “Features”- 🖥️ Multiple Viewport Sizes: Mobile (375px), Tablet (768px), Desktop (1280px), Desktop Large (1920px)
- 🎮 Interactive Controls: Switch between viewports with visual feedback
- 📏 Dimension Display: See exact viewport dimensions in real-time
- 🎨 Device Frames: Optional device-style frames for realistic preview
- 📱 Scale to Fit: Automatically scale large viewports to fit container
- ♿ Accessible: Full keyboard navigation and screen reader support
Basic Usage
Section titled “Basic Usage”Single Viewport Preview
Section titled “Single Viewport Preview”Show a component at different viewport sizes with interactive controls:
Button Component Preview
375 × 667 px
Component Props
Section titled “Component Props”| Prop | Type | Default | Description |
|---|---|---|---|
initialViewport | 'mobile' | 'tablet' | 'desktop' | 'desktopLarge' | 'desktop' | Initial viewport to display |
showControls | boolean | true | Whether to show viewport controls |
showDimensions | boolean | true | Whether to show dimension labels |
showFrame | boolean | true | Whether to show device frame around preview |
title | string | - | Custom title for the preview section |
className | string | '' | Additional CSS classes |
scaleToFit | boolean | false | Whether to scale content to fit container |
Advanced Examples
Section titled “Advanced Examples”Navigation Component
Section titled “Navigation Component”Navigation Bar
768 × 1024 px
Multi-Viewport Preview
Section titled “Multi-Viewport Preview”Show the same component at multiple viewport sizes simultaneously:
Viewport Sizes
Section titled “Viewport Sizes”| Viewport | Width | Height | Description |
|---|---|---|---|
| Mobile | 375px | 667px | iPhone-sized mobile device |
| Tablet | 768px | 1024px | iPad-sized tablet device |
| Desktop | 1280px | 720px | Standard desktop screen |
| Desktop Large | 1920px | 1080px | Large desktop/external monitor |
These sizes align with:
- Sparkle Design System breakpoints (
@sparkle/theme) - Visual regression testing viewports (
packages/storybook/test/visual-regression/utils.ts) - Common device dimensions and industry standards
Best Practices
Section titled “Best Practices”Testing Responsive Components
Section titled “Testing Responsive Components”- Start with Mobile: Test mobile viewport first to ensure core functionality works on smallest screens
- Check Breakpoints: Test at each major breakpoint (mobile, tablet, desktop) to verify layout transitions
- Verify Touch Targets: Ensure interactive elements are large enough (44×44px minimum) on mobile
- Test Content Reflow: Verify text and images reflow properly without overflow or awkward line breaks
- Check Navigation: Test navigation patterns work across all screen sizes
Accessibility Considerations
Section titled “Accessibility Considerations”- Keyboard Navigation: All viewport controls are keyboard accessible
- Screen Reader Support: Viewport buttons have proper ARIA labels
- Focus Management: Clear focus indicators on all interactive elements
- Semantic HTML: Preview content maintains proper heading hierarchy
Performance Tips
Section titled “Performance Tips”- Scale to Fit: Use
scaleToFit={true}for large viewports to prevent horizontal scrolling - Show Relevant Viewports: Don’t show all viewports if component only works on specific sizes
- Optimize Content: Keep preview content lightweight to maintain smooth switching
Technical Details
Section titled “Technical Details”Implementation
Section titled “Implementation”The responsive preview component uses:
- React State Management: Tracks active viewport and container dimensions
- ResizeObserver API: Monitors container size for dynamic scaling
- CSS Transform: Scales content when
scaleToFitis enabled - Astro Islands: Client-side hydration with
client:loadfor interactivity
Browser Compatibility
Section titled “Browser Compatibility”- ✅ Modern Browsers: Chrome, Firefox, Safari, Edge (latest versions)
- ✅ ResizeObserver: Supported in all modern browsers
- ✅ Responsive: Works on mobile, tablet, and desktop
- ✅ Progressive Enhancement: Falls back gracefully without JavaScript
Related Documentation
Section titled “Related Documentation”- Theme System - Cross-platform design tokens and responsive patterns
- Accessibility Guide - Accessibility best practices
Source Code
Section titled “Source Code”View the source code on GitHub: