Aspect Ratio Standard 4 - 21:9 Aspect Ratio (Ultrawide), a shadcn block by @shadcnblocks · shadcn.exchange

Aspect Ratio Standard 4 - 21:9 Aspect Ratio (Ultrawide), a shadcn block by @shadcnblocks · shadcn.exchange

example/aspect-ratio/aspect-ratio-standard-4.tsx

import { AspectRatio } from "@/components/ui/aspect-ratio";

export const title = "21:9 Aspect Ratio (Ultrawide)";

const Example = () => (
  <div className="w-full max-w-md">
    <AspectRatio ratio={21 / 9}>
      <div className="flex size-full items-center justify-center rounded-md bg-muted">
        <span className="text-sm text-muted-foreground">21:9</span>
      </div>
    </AspectRatio>
  </div>
);

export default Example;