Components

Aspect Ratio

Maintains a consistent width-to-height ratio for responsive content

Preview

npx shadcn@latest add @cubby-ui/aspect-ratio


import { AspectRatio } from "@/components/ui/cubby-ui/aspect-ratio";


<AspectRatio />

Create square containers with 1:1 aspect ratio.

Use portrait aspect ratios for vertical content.

Display content with different aspect ratios.

1:1

4:3

16:9

Embed responsive videos with proper aspect ratio.

Video Placeholder (16:9)