Aspect Ratio

Vinyl styling: Unstyled; pair it with Test Pattern for 4:3 CRT frames.

InstallationCopy Anchor Link

npx shadcn@latest add @vinyl/aspect-ratio

The @vinyl registry URL in components.json decides whether you get the web or the native version (see installation for web / native).

UsageCopy Anchor Link

<AspectRatio ratio={4 / 3}>
  <TestPattern className="size-full" />
</AspectRatio>

APICopy Anchor Link

Same API as shadcn/ui's Aspect Ratio on the web, and React Native Reusables' Aspect Ratio on native. Vinyl only changes styling and motion.