Components
AspectRatio
Maintains a consistent aspect ratio for media.
AspectRatio wraps content in a container that preserves a fixed aspect ratio, useful for responsive media.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/aspect-ratio.jsonUsage
import { AspectRatio } from "@/components/ui/aspect-ratio";
export default function Example() {
return (
<AspectRatio ratio={16 / 9}>
<img src="https://placehold.co/600x400" alt="Placeholder" className="size-full object-cover" />
</AspectRatio>
);
}Examples
Default
16:9
Square
1:1
API
Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.
| Part | Built on | Props |
|---|---|---|
AspectRatiodata-slot="aspect-ratio" | <div>HTML |
|
Last updated on