RadCN
Displayreadycomponentready

Aspect Ratio

A dependency-free CSS aspect-ratio wrapper for responsive media, art, and arbitrary fixed-ratio content.

Importimport { AspectRatio } from 'radcn/aspect-ratio'
Preview

Live package example

Render the upstream 16:9 Drew Beamer photo example with rounded muted root styling, full-cover image sizing, exact alt text, and dark-mode image filters.

Aspect Ratio Demo

Render the upstream 16:9 Drew Beamer photo example with rounded muted root styling, full-cover image sizing, exact alt text, and dark-mode image filters.

Preview
Photo by Drew Beamer

Next Image fill maps to a native img that fills the RadCN aspect-ratio box; the exact upstream remote URL is used as read-only demo content.

import { AspectRatio } from 'radcn/aspect-ratio'

const imageSrc =
  'https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80'

export function AspectRatioDemo() {
  return (
    <AspectRatio class="overflow-hidden rounded-lg bg-muted" ratio="16 / 9">
      <img
        alt="Photo by Drew Beamer"
        class="h-full w-full rounded-lg object-cover dark:brightness-[0.2] dark:grayscale"
        src={imageSrc}
        style="display:block;width:100%;height:100%;border-radius:inherit;object-fit:cover;"
      />
    </AspectRatio>
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { AspectRatio } from 'radcn/aspect-ratio'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

  • AspectRatio is a layout wrapper and does not alter the semantics of its child content.
  • Meaningful image content keeps its accessible name on the native img alt attribute.
  • The wrapper exposes data-radcn-aspect-ratio for tests and composition without introducing ARIA noise.
  • Dark-mode image treatment is visual only and does not change the image accessible name.

Customization

  • Use ratio="16 / 9" for the upstream demo ratio; custom ratios remain string CSS aspect-ratio values.
  • Root rounded/muted styling maps to package CSS by default and can be changed with class, style, and CSS variables.
  • Next Image fill maps to native img width, height, border-radius, and object-fit styling inside the AspectRatio wrapper.
  • Dark-mode brightness and grayscale utilities map to app-owned CSS under data-radcn-theme="dark".

Remix 3 Notes

  • React client component markers and Radix AspectRatio map to dependency-free CSS aspect-ratio markup.
  • Next Image is not a RadCN dependency; the demo uses a native img with the exact upstream remote URL.
  • data-slot="aspect-ratio" maps to data-radcn-aspect-ratio, and className maps to class.
  • Tailwind rounded-lg, bg-muted, h-full, w-full, object-cover, dark:brightness-[0.2], and dark:grayscale utilities map to package CSS, class, style, CSS variables, and theme-scoped app CSS.
  • Remote image loading remains app-owned; RadCN owns the ratio wrapper, not image optimization or hosting policy.
  • Vendor source remains read-only evidence and is not imported by RadCN.