Aspect Ratio

Constrains images, video embeds, and maps to a fixed ratio as they scale — the layout utility that keeps neobrutalist cards on-grid.

import Image from "next/image"

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

Aspect ratio locks its children to a fixed width-to-height ratio — 16:9, square, portrait — so media scales with its container instead of reflowing the page. This variant is a dependency-free wrapper over the CSS aspect-ratio property (Base UI has no aspect-ratio primitive) and unstyled by design: the neobrutalist borders and shadows come from the card you drop it into.

Reach for it when:

Image grids and thumbnails — normalize mixed source dimensions into uniform cards.
Video and map embeds — reserve a 16:9 slot so the iframe never shifts the layout while it loads.
Responsive hero media — scale artwork with the column width without hardcoding heights.

Installation


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/aspect-ratio.json
npx shadcn@latest add https://neobrutalism.com/r/base/aspect-ratio.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/aspect-ratio.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/aspect-ratio.json

Copy and paste the following code into your project.

components/ui/aspect-ratio.tsx

"use client"

import { AspectRatio as AspectRatioPrimitive } from "radix-ui"

function AspectRatio({
  ...props
}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
}

export { AspectRatio }

Update the import paths to match your project setup.

Usage

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

<AspectRatio ratio={16 / 9}>
  <Image src="..." alt="Image" className="rounded-md object-cover" />
</AspectRatio>

Examples

Square

A square aspect ratio component using the ratio={1 / 1} prop. This is useful for displaying images in a square format.

import Image from "next/image"

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

Portrait

A portrait aspect ratio component using the ratio={9 / 16} prop. This is useful for displaying images in a portrait format.

import Image from "next/image"

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

RTL

To enable RTL support in Neobrutalism.com, see the RTL configuration guide.

"use client"

import * as React from "react"

Accessibility

AspectRatio renders a plain div — purely presentational, no role or ARIA attributes involved. Accessibility lives with the content inside it: give images meaningful alt text (or alt="" when decorative) and embedded iframes a title. Since the usual pattern crops with object-cover, avoid images whose cropped edges carry information.

API Reference

AspectRatio

The AspectRatio component displays content within a desired ratio.

Prop	Type	Default	Required
`ratio`	`number`	-	Yes
`className`	`string`	-	No

This variant has no primitive dependency — it sets the CSS aspect-ratio property on a div.