Components

Aspect ratio

Holds a ratio computed at runtime. Ratios known at build time need no component: aspect-video, aspect-square, aspect-[4/3].

aspect-video

Widescreen

aspect-square

Square

Examples

Runtime ratio

Reach for the component when the ratio only exists at runtime. Tailwind compiles the classes it can read in the source, so an aspect-[] class assembled from a variable never becomes a rule; the component writes the value as an inline style instead.

1.78 / 1

Composition

Constrained media

<AspectRatio>
- <img />
</AspectRatio>

Installation

The Control UI source installs this primitive from src/registry/sources/control-ui/ui/aspect-ratio.tsx.

Registry command

npx shadcn@latest add https://control-ui.dev/r/aspect-ratio.json

See registry manifest

Raw code

Primary installed source

src/registry/sources/control-ui/ui/aspect-ratio.tsx

import type { ComponentProps } from "react";

export type AspectRatioProps = ComponentProps<"div"> & { ratio?: number };

const DEFAULT_ASPECT_RATIO = 16 / 9;

// native CSS aspect-ratio, no Radix; rounding and clipping stay caller's to add

export function AspectRatio({ ratio = DEFAULT_ASPECT_RATIO, className, style, ...props }: AspectRatioProps) {

  return <div data-control-ui="aspect-ratio" data-slot="root" style={{ aspectRatio: ratio, ...style }} className={className} {...props} />;

}