Aspect Ratio
Component that maintains a specific width-to-height ratio for responsive content.
Unlock Advanced Aspect Ratio Features
Get access to powerful pro features that enhance your aspect ratio component with advanced capabilities, premium styling options, and optimized performance.
Pro Features
Unlock advanced capabilities with the Pro version
Preset Ratios
Ready-to-use ratios for square, video, portrait, golden ratio, cinema, and more
Responsive Behavior
Different aspect ratios for different breakpoints with smooth transitions
Premium Variants
Glass and gradient variants with hover effects and animations
Overlay Support
Add overlay content with flexible positioning options
Loading States
Built-in skeleton and loading animations for better UX
Advanced Customization
Extended radius options, smooth transitions, and animation controls
Installation
Install via CLI
moonui add aspect-ratioUsage
Basic Usage
Pro Usage
Examples
Basic Image Container
Standard 16:9 aspect ratio for images.
Video Placeholder
Video content with play icon overlay.
Common Aspect Ratios
Different aspect ratios for various use cases.
Variants
Different visual styles for aspect ratio containers.
Square Image Grid
Grid of square aspect ratio images.
Portrait Content
Vertical aspect ratio for portrait content.
Preset Ratios
Ready-to-use aspect ratio presets for common use cases.
Responsive Ratios
Aspect ratios that adapt to different screen sizes.
Responsive Ratio
Resize window to see changes
Overlay Content
Add overlay content with positioning options.
Premium Content
Exclusive access
Advanced Variants
Premium visual styles with glass and gradient effects.
Loading States
Different loading states for content placeholders.
All Preset Ratios
Complete collection of available preset ratios.