Primitives
Aspect ratio
CSS aspect-ratio wrapper for media and previews.
Composition
The preferred shape for composing the installed primitive from its exported parts.
Root
Single-slot surface with no nested parts.
AspectRatioThe refined source installs this primitive from src/registry/sources/refined/ui/aspect-ratio.tsx. Install it on its own with the command above, or inspect the source below.
npx shadcn@latest add http://127.0.0.1:3000/r/refined/aspect-ratio.jsonRaw code
Primary installed primitive source
Aspect ratio slot
src/registry/sources/refined/ui/aspect-ratio.tsx
import type { AspectRatioProps } from "@/components/refined-ui/contracts";import { cn } from "@/components/refined-ui/lib/cn";import { skinSlot } from "@/components/refined-ui/skin";// Pure-CSS ratio box (no Radix): sets native `aspect-ratio` from `ratio` prop; rounding/clipping is caller's/skin's to add.export function AspectRatio({ ratio = 16 / 9, className, style, ...props }: AspectRatioProps) { return ( <div data-ui="agent" data-slot="aspect-ratio" style={{ aspectRatio: ratio, ...style }} className={cn(skinSlot("aspect-ratio", {}), className)} {...props} /> );}