Aspect Ratio

Edit the code — the preview updates live. Try changing props, text, or classes.

render(
  <div className="w-full max-w-sm">
    <AspectRatio ratio={16 / 9}>
      <div className="flex h-full w-full items-center justify-center rounded-xl bg-[linear-gradient(120deg,var(--color-accent),var(--color-accent-3))] font-mono text-sm text-white">16 / 9</div>
    </AspectRatio>
  </div>
)

Copy the source into your project with the registry CLI:

Or install the package and import it:

Import AspectRatio from "@stacklyui/ui" and compose it as shown in the playground above. Every interactive primitive is built on Radix, so keyboard navigation, focus management, and ARIA are handled for you.