Skip to Content

aspect-ratio

ui

Displays content within a desired ratio.

Use cases

  • Responsive image containers
  • Video embeds with fixed ratio
  • Thumbnail grids
  • Map or chart containers

Features

  • Any numeric ratio (16/9, 4/3, 1/1)
  • Content scales within the ratio

Source Code

View the full component source code below.

"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 }

Installation

npx shadcn@latest add https://registry.mukoko.com/api/v1/ui/aspect-ratio

Dependencies

radix-ui

API

Fetch this component's metadata and source code from the registry API.

GET/api/v1/ui/aspect-ratio

Source

components/ui/aspect-ratio.tsx