PreviewFeatures
Maintains consistent aspect ratios across different screen sizes
Built with Radix UI Aspect Ratio primitive
Perfect for images, videos, and embedded content
Common ratios like 16:9, 4:3, 1:1, and custom ratios
Prevents layout shifts and maintains visual consistency
Responsive and adapts to container width automatically
Shadcn/ui Aspect Ratio - Figma Component
Displays content within a desired ratio. This Figma component is part of our comprehensive design system that brings the popular shadcn/ui library into your design workflow.
Every Aspect Ratio variant includes all the necessary states, properties, and styling options you need to create consistent, production-ready designs. The component seamlessly integrates with your existing Figma files and maintains full compatibility with the shadcn/ui React implementation.
Your questions, answered
Browse all 58 components
Accordion
Alert Dialog
Alert
Aspect Ratio
Avatar
Badge
Breadcrumb
Button Group
Button
Calendar
Card
Carousel
Chart
Checkbox
Collapsible
Combobox
Command
Context Menu
Data Table
Date Picker
Dialog
Drawer
Dropdown Menu
Empty
Field
Form
Hover Card
Input Group
Input OTP
Input
Item
Kbd
Label
Menubar
Native Select
Navigation Menu
Pagination
Popover
Progress
Radio Group
Resizable
Scroll Area
Select
Separator
Sheet
Sidebar
Skeleton
Slider
Sonner
Spinner
Switch
Table
Tabs
Textarea
Toast
Toggle Group
Toggle
Tooltip
Designing with aspect ratios in Figma
The shadcn/ui figma Aspect Ratio component helps you design images and videos with perfect proportions. Use 16:9 for videos, 1:1 for avatars, or custom ratios for your needs. This shadcn figma component ensures your designs stay consistent across all screen sizes.
Aspect Ratio for media embeds
Design video embeds and media cards in Figma with proper aspect ratios. The shadcn/ui figma component includes common ratios like 16:9 and 4:3, so you can prototype YouTube embeds and image galleries that look great on any device.
Choosing aspect ratios for your design
Use the shadcn figma Aspect Ratio component to design with standard ratios—16:9 for videos, 4:3 for photos, and 1:1 for social media. Design once in Figma, and developers can implement it exactly using shadcn/ui React components.
Shadcn Figma Aspect Ratio variants
This shadcn/ui figma component matches the code implementation perfectly. Design your image grids, video players, and media cards in Figma knowing they'll look identical when built. No surprises between design and development.