AspectRatioRtl() — ui Function Reference

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

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ AspectRatioRtl() — ui Function Reference

Dependency Diagram

graph TD
  be287221_c0fc_4627_6e2f_161de1e01f68["AspectRatioRtl()"]
  77832446_0ac5_3647_ecc0_6002b3c9eb89["aspect-ratio-rtl.tsx"]
  be287221_c0fc_4627_6e2f_161de1e01f68 -->|defined in| 77832446_0ac5_3647_ecc0_6002b3c9eb89
  style be287221_c0fc_4627_6e2f_161de1e01f68 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/aspect-ratio-rtl.tsx lines 33–51

export function AspectRatioRtl() {
  const { dir, t } = useTranslation(translations, "ar")

  return (
    <figure className="w-full max-w-sm" dir={dir}>
      <AspectRatio ratio={16 / 9} className="bg-muted rounded-lg">
        <Image
          src="https://avatar.vercel.sh/shadcn1"
          alt="Photo"
          fill
          className="w-full rounded-lg object-cover grayscale dark:brightness-20"
        />
      </AspectRatio>
      <figcaption className="text-muted-foreground mt-2 text-center text-sm">
        {t.caption}
      </figcaption>
    </figure>
  )
}