# Aspect Ratio Standard 6 - 9:16 Aspect Ratio (Vertical/Mobile)

> Aspect ratio container with 9:16 vertical mobile 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-6).

- Page, with a live preview: https://shadcn.exchange/r/shadcnblocks/aspect-ratio-aspect-ratio-standard-6
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnblocks/aspect-ratio-aspect-ratio-standard-6-light-01acbb50d0ff40fb.png
- Registry item: https://shadcnblocks.com/r/aspect-ratio-aspect-ratio-standard-6.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-6.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-6.tsx`

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

export const title = "9:16 Aspect Ratio (Vertical/Mobile)";

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

export default Example;
```