# Aspect Ratio Standard 4 - 21:9 Aspect Ratio (Ultrawide)

> Aspect ratio container with 21:9 ultrawide ratio.

A shadcn/ui block from the [@shadcnblocks](https://shadcnblocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnblocks/aspect-ratio-aspect-ratio-standard-4).

- Page, with a live preview: https://shadcn.exchange/r/shadcnblocks/aspect-ratio-aspect-ratio-standard-4
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnblocks/aspect-ratio-aspect-ratio-standard-4-light-75ea266fe20dd8bc.png
- Registry item: https://shadcnblocks.com/r/aspect-ratio-aspect-ratio-standard-4.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/aspect-ratio-aspect-ratio-standard-4.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `aspect-ratio`

## Files

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

```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;
```