Shadcn.io is not affiliated with official shadcn/ui
Shadcn Aspect Ratio
React aspect ratio for images and video embeds. Built with TypeScript and Tailwind CSS for Next.js using Base UI — lock 16/9, 1/1, or any width over height.
Aspect ratio is a box that keeps its height from its width. Drop an image or a video in and the frame does not jump when the file arrives. Use 16 / 9 for a player, 1 / 1 for a face, 9 / 16 for a story.
Looking for a neobrutalism version for shadcn?
Same aspect ratio, thicker borders. The NeoBrutalism aspect ratio is the kit if you want that look.
Usage
import { AspectRatio } from "@/components/ui/aspect-ratio"<AspectRatio ratio={16 / 9}>
<Image src="..." alt="Image" className="rounded-md object-cover" fill />
</AspectRatio>ratio is width ÷ height. 16 / 9 is widescreen. Pair fill on Next.js Image with object-cover on the image.
Composition
Square
ratio={1 / 1} for a face, a thumbnail, an app icon.
Portrait
ratio={9 / 16} for a story or a phone frame.
RTL
Wrap with DirectionProvider and dir="rtl". The box is the same; captions and overlays follow the reading direction.
API
Prop
Type
Notes
Reserve the box first
The point is the empty frame. Put a Skeleton inside while the image loads or the page still jumps.
object-cover on the child. object-contain letterboxes.
With other components
Faces stay square
CardHero image on top
SkeletonFill the reserved box
CarouselSlides share a ratio
DialogPreview matches the thumb
Hover CardMedia in the preview
Questions
Related
Was this page helpful?
Sign in to leave feedback.
Alert Dialog
React alert dialog for delete confirms and irreversible choices. Built with TypeScript and Tailwind CSS for Next.js using Base UI — focus trap and a required answer.
Attachment
React attachment for files in a composer or thread. Built with TypeScript and Tailwind CSS for Next.js using Base UI — upload states, sizes, and a full-card trigger.