AspectRatioDemo() — ui Function Reference

Architecture documentation for the AspectRatioDemo() function in aspect-ratio-demo.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ AspectRatioDemo() — ui Function Reference

Dependency Diagram

graph TD
  b2390a24_f4cf_0eaf_d4ed_62c126a370f4["AspectRatioDemo()"]
  60004129_1ecd_f31a_8290_e8185406dbe2["aspect-ratio-demo.tsx"]
  b2390a24_f4cf_0eaf_d4ed_62c126a370f4 -->|defined in| 60004129_1ecd_f31a_8290_e8185406dbe2
  style b2390a24_f4cf_0eaf_d4ed_62c126a370f4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/new-york-v4/examples/aspect-ratio-demo.tsx lines 5–16

export default function AspectRatioDemo() {
  return (
    <AspectRatio ratio={16 / 9} className="bg-muted rounded-lg">
      <Image
        src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
        alt="Photo by Drew Beamer"
        fill
        className="h-full w-full rounded-lg object-cover dark:brightness-[0.2] dark:grayscale"
      />
    </AspectRatio>
  )
}