Ravox KitSurfaces
Aspect Ratio
Holds an image, video or iframe at a fixed ratio, so nothing jumps when the media arrives. Shows a placeholder while loading, fades the media in briefly and reports when it fails.
Settings
Toggles
Examples
Placeholder while loading
16/9 video
Grid of square thumbnails
Portrait, whole media
Installation
The command creates components/ui/aspect-ratio.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add aspect-ratioProps
| Prop | Type | Default | Description |
|---|---|---|---|
| ratio | number | `${number}/${number}` | 16 / 9 | Width divided by height: 16 / 9, "4/3", 1. |
| fit | "cover" | "contain" | "cover" | Crops the media to fill, or shows it whole with bars. |
| placeholder | ReactNode | false | — | Replaces the loading placeholder (a <Skeleton />, the photo's average color). false removes it. |
| error | ReactNode | "Media unavailable" | What appears if the <img> or <video> fails. |
| ...props | ComponentProps<"div"> | — | Everything a <div> accepts. The <img>, <video> or <iframe> goes in as a direct child. |