Docs

Data feedback

AspectRatio

Displays content within a fixed ratio like 16:9, 4:3, or square.

5 examplesPrimitive ComponentReact 19 & Next.js 16Tailwind CSS v4
Install
pnpm add @quinkit/ui
Import
import { AspectRatio } from "@quinkit/ui";

Interactive Examples

Live previews · code · themes · viewport · dark mode

16:9 Image Aspect Ratio

Constrain an image to a standard 16:9 video ratio.

16:9 Image Aspect Ratio rendered preview

Scenery

Embedded Video Iframe

Keep responsive video embeds perfectly proportional.

Embedded Video Iframe rendered preview

1:1 Square Product Media

Square 1:1 aspect ratio card media container.

1:1 Square Product Media rendered preview

Minimalist Smart Watch

Smart Watch v2

$299.00

21:9 Ultra-Wide Hero Banner

Wide aspect ratio hero media banner.

21:9 Ultra-Wide Hero Banner rendered preview

Abstract 3D Art

Missing-Image Fallback Ratio

Placeholder aspect ratio container when image fails to load.

Missing-Image Fallback Ratio rendered preview

Image Unavailable

Overview

AspectRatio is part of the Week 4–6 free core component set. It follows the shared component standard with TypeScript exports, semantic token styling, accessibility-minded markup, and Storybook examples.

Accessibility Details

  • Uses semantic HTML or Radix primitives where applicable.
  • Interactive components expose keyboard/focus behavior through native controls or Radix.
  • ARIA roles, states, and labels are applied where relevant.

Styling

  • Uses semantic design tokens such as bg-background, text-foreground, border-border, bg-popover, and text-muted-foreground.
  • Motion-heavy components include reduced-motion compatible classes where applicable.

Accessibility & Keyboard

AspectRatio adheres to WAI-ARIA design patterns for accessible web components.

Keyboard Navigation

  • Tab / Shift + Tab — Focuses control and moves between interactive elements.
  • Space / Enter — Triggers action or toggles selection.
  • Escape — Closes open popovers, overlays, or dropdown menus.

ARIA Standards

  • Built with semantic HTML tags and explicit aria-* attributes.
  • Uses high-contrast focus rings (ring-ring) visible in both light & dark mode.
  • Supports screen readers with non-visual label fallbacks.

Registry Install

Add a shadcn-compatible bridge file to your project that re-exports from @quinkit/ui.

Registry
npx shadcn@latest add https://quinkit-ui.vercel.app/r/aspect-ratio.json