shadcn-aspect-ratio

star 0

shadcn/ui AspectRatio component — displays content within a desired ratio. Use when asked about AspectRatio, Seitenverhaeltnis, shadcn aspect ratio, 16/9 Bild, responsive image ratio, shadcn/ui aspect-ratio.

zone1987 By zone1987 schedule Updated 6/14/2026

name: shadcn-aspect-ratio description: > shadcn/ui AspectRatio component — displays content within a desired ratio. Use when asked about AspectRatio, Seitenverhaeltnis, shadcn aspect ratio, 16/9 Bild, responsive image ratio, shadcn/ui aspect-ratio.

shadcn/ui — Aspect Ratio

Displays content within a desired ratio. Wrapper around Radix UI AspectRatio.Root (Radix version) or a pure CSS solution (Base version).

Props

  • ratio — number, e.g. 16/9, 1/1, 9/16 (required)
  • className — custom classes

Typical usage

Wrap an <Image> or video element. The Base version uses a CSS aspect-(--ratio) custom property; the Radix version uses a padding-top trick internally.

Reference files

  • references/installation.md — CLI and manual install
  • references/source.md — full component source (Radix + Base)
  • references/api.md — props table
  • references/examples.md — demo, square, portrait examples
  • references/base-vs-radix.md — implementation differences
Install via CLI
npx skills add https://github.com/zone1987/claude-a-dev-team --skill shadcn-aspect-ratio
Repository Details
star Stars 0
call_split Forks 0
navigation Branch main
article Path SKILL.md
More from Creator