{"name":"aspect-ratio","title":"Aspect Ratio","description":"Displays content within a desired ratio.","installCommand":"bunx marko-ui add aspect-ratio -y","usageTags":"<AspectRatio>","importSnippet":"import AspectRatio from \"@/components/ui/aspect-ratio/aspect-ratio.marko\";","usageSnippet":"<AspectRatio ratio=(16 / 9)>\n  <img src=\"...\" alt=\"Image\" class=\"rounded-md object-cover\" />\n</AspectRatio>","tags":["AspectRatio"],"parts":[],"props":[{"name":"ratio","type":"number","required":false,"description":"Width-to-height ratio to constrain the content to, e.g. `16 / 9`. Defaults to `1`."}],"events":[],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"aspect-ratio-demo","title":"Default","source":"import AspectRatio from \"@marko-ui/shadcn/ui/aspect-ratio/aspect-ratio.marko\";\n\n<div class=\"w-full max-w-md\">\n  <AspectRatio ratio=(16 / 9)>\n    <img\n      src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n      alt=\"Photo by Drew Beamer\"\n      class=\"h-full w-full rounded-md object-cover\"\n    />\n  </AspectRatio>\n</div>","description":"A `16 / 9` ratio, the common case for images and video."},{"id":"aspect-ratio-square","title":"Square","source":"import AspectRatio from \"@marko-ui/shadcn/ui/aspect-ratio/aspect-ratio.marko\";\n\n<div class=\"w-full max-w-xs\">\n  <AspectRatio ratio=(1 / 1)>\n    <div class=\"flex h-full w-full items-center justify-center rounded-md bg-muted text-muted-foreground\">\n      1:1\n    </div>\n  </AspectRatio>\n</div>","description":"A `1 / 1` ratio, useful for displaying images in a square format."},{"id":"aspect-ratio-portrait","title":"Portrait","source":"import AspectRatio from \"@marko-ui/shadcn/ui/aspect-ratio/aspect-ratio.marko\";\n\n<div class=\"w-full max-w-xs\">\n  <AspectRatio ratio=(9 / 16)>\n    <img\n      src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=600&dpr=2&q=80\"\n      alt=\"Photo by Drew Beamer\"\n      class=\"h-full w-full rounded-md object-cover\"\n    />\n  </AspectRatio>\n</div>","description":"A `9 / 16` ratio, useful for displaying images in a portrait format."},{"id":"aspect-ratio-rtl","title":"RTL","source":"import AspectRatio from \"@marko-ui/shadcn/ui/aspect-ratio/aspect-ratio.marko\";\n\n<figure class=\"w-full max-w-sm\" dir=\"rtl\">\n  <AspectRatio ratio=(16 / 9) class=\"rounded-lg bg-muted\">\n    <img\n      src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n      alt=\"Photo by Drew Beamer\"\n      class=\"h-full w-full rounded-lg object-cover\"\n    />\n  </AspectRatio>\n  <figcaption class=\"mt-2 text-center text-sm text-muted-foreground\">\n    منظر طبيعي جميل\n  </figcaption>\n</figure>","description":"To enable RTL support, set `dir=\"rtl\"` on an ancestor. AspectRatio itself has no physical (left/right) styling to flip."},{"id":"aspect-ratio-content-card","title":"Content card","source":"import AspectRatio from \"@marko-ui/shadcn/ui/aspect-ratio/aspect-ratio.marko\";\n\n<div class=\"w-full max-w-sm\">\n  <AspectRatio ratio=(4 / 3)>\n    <div class=\"flex h-full w-full flex-col items-center justify-center gap-1 rounded-md border border-border bg-card text-card-foreground\">\n      <span class=\"text-sm font-medium\">4:3 content</span>\n      <span class=\"text-xs text-muted-foreground\">Video thumbnail placeholder</span>\n    </div>\n  </AspectRatio>\n</div>","description":"Ratios apply to any content, not just images — here a `4 / 3` placeholder card."},{"id":"aspect-ratio-ultrawide-banner","title":"Ultrawide banner","source":"import AspectRatio from \"@marko-ui/shadcn/ui/aspect-ratio/aspect-ratio.marko\";\n\n<div class=\"w-full max-w-lg\">\n  <AspectRatio ratio=(21 / 9)>\n    <div class=\"flex h-full w-full items-center justify-center rounded-md bg-primary text-primary-foreground\">\n      21:9 banner\n    </div>\n  </AspectRatio>\n</div>","description":"A `21 / 9` ratio for wide banner layouts."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"div"}