2b:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 2c:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 2d:T7ab,"use client"; import { AspectRatio as AspectRatioPrimitive } from "radix-ui"; import type { ComponentProps } from "react"; import { cn } from "@/lib/utils"; const INNER = { plain: "", rounded: "rounded-2xl bg-neutral-100 after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:ring-1 after:ring-inset after:ring-black/[0.07] dark:bg-white/[0.05] dark:after:ring-white/[0.08]", framed: "rounded-[14px] bg-neutral-100 after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:ring-1 after:ring-inset after:ring-black/[0.06] dark:bg-white/[0.05] dark:after:ring-white/[0.08]", } as const; export interface AspectRatioProps extends ComponentProps { /** plain: just the box · rounded: clipped corners with a hairline edge · framed: sits inside a raised white frame. */ variant?: keyof typeof INNER; /** Classes for the outer frame of the framed variant. */ frameClassName?: string; } /** Keeps its content at a fixed width-to-height ratio, e.g. 16 / 9. Put an object-cover image or a video inside. */ export function AspectRatio({ variant = "rounded", ratio = 16 / 9, className, frameClassName, ...props }: AspectRatioProps) { const box = ( img]:size-full [&>img]:object-cover [&>video]:size-full [&>video]:object-cover", INNER[variant], className)} {...props} /> ); if (variant !== "framed") return box; return (

{box}

); } export default AspectRatio; 2e:T3181,

"use client";

import { AspectRatio as AspectRatioPrimitive } from "radix-ui";
import type { ComponentProps } from "react";
import { cn } from "@/lib/utils";

const INNER = {
  plain: "",
  rounded:
    "rounded-2xl bg-neutral-100 after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:ring-1 after:ring-inset after:ring-black/[0.07] dark:bg-white/[0.05] dark:after:ring-white/[0.08]",
  framed:
    "rounded-[14px] bg-neutral-100 after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:ring-1 after:ring-inset after:ring-black/[0.06] dark:bg-white/[0.05] dark:after:ring-white/[0.08]",
} as const;

export interface AspectRatioProps extends ComponentProps<typeof AspectRatioPrimitive.Root> {
  /** plain: just the box · rounded: clipped corners with a hairline edge · framed: sits inside a raised white frame. */
  variant?: keyof typeof INNER;
  /** Classes for the outer frame of the framed variant. */
  frameClassName?: string;
}

/** Keeps its content at a fixed width-to-height ratio, e.g. 16 / 9. Put an object-cover image or a video inside. */
export function AspectRatio({ variant = "rounded", ratio = 16 / 9, className, frameClassName, ...props }: AspectRatioProps) {
  const box = (
    <AspectRatioPrimitive.Root
      ratio={ratio}
      className={cn("overflow-hidden [&>img]:size-full [&>img]:object-cover [&>video]:size-full [&>video]:object-cover", INNER[variant], className)}
      {...props}
    />
  );
  if (variant !== "framed") return box;
  return (
    <div
      className={cn(
        "w-full rounded-[20px] bg-white p-1.5 shadow-[inset_0_0_0_1px_rgb(0_0_0/0.07),0_1px_2px_rgb(0_0_0/0.06),0_8px_24px_-12px_rgb(0_0_0/0.16)]",
        "dark:bg-neutral-800 dark:shadow-[inset_0_0_0_1px_rgb(255_255_255/0.08),inset_0_1px_0_rgb(255_255_255/0.08),0_8px_24px_-12px_rgb(0_0_0/0.6)]",
        frameClassName,
      )}
    >
      {box}
    </div>
  );
}

export default AspectRatio;

2f:T680,"use client"; import { useState } from "react"; import { AspectRatio } from "@/components/scalar-ui/aspect-ratio"; const ratios = [ { label: "16:9", value: 16 / 9 }, { label: "4:3", value: 4 / 3 }, { label: "1:1", value: 1 }, { label: "21:9", value: 21 / 9 }, ]; export default function Demo() { const [ratio, setRatio] = useState(ratios[0]); return (

{ratios.map((r) => ( ))}

); } 30:T319e,

"use client";

import { useState } from "react";
import { AspectRatio } from "@/components/scalar-ui/aspect-ratio";

const ratios = [
  { label: "16:9", value: 16 / 9 },
  { label: "4:3", value: 4 / 3 },
  { label: "1:1", value: 1 },
  { label: "21:9", value: 21 / 9 },
];

export default function Demo() {
  const [ratio, setRatio] = useState(ratios[0]);
  return (
    <div className="w-full max-w-[420px] space-y-4">
      <div className="[&_[data-radix-aspect-ratio-wrapper]]:transition-[padding-bottom] [&_[data-radix-aspect-ratio-wrapper]]:duration-300 [&_[data-radix-aspect-ratio-wrapper]]:ease-out">
        <AspectRatio ratio={ratio.value}>
          <img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=900&h=900&fit=crop&auto=format&q=75" alt="A lake below mountains at sunrise" />
        </AspectRatio>
      </div>
      <div className="mx-auto flex w-fit gap-0.5 rounded-[13px] bg-neutral-100 p-1 dark:bg-white/[0.06]">
        {ratios.map((r) => (
          <button
            key={r.label}
            onClick={() => setRatio(r)}
            aria-pressed={ratio.label === r.label}
            className="h-8 rounded-[9px] px-3 text-[13px] font-medium tabular-nums text-neutral-500 outline-none transition-[background-color,color,box-shadow] hover:text-neutral-900 focus-visible:text-neutral-900 aria-pressed:bg-white aria-pressed:text-neutral-950 aria-pressed:shadow-[0_1px_2px_rgb(0_0_0/0.08),0_0_0_1px_rgb(0_0_0/0.04)] dark:text-neutral-400 dark:hover:text-white dark:aria-pressed:bg-white/[0.12] dark:aria-pressed:text-white"
          >
            {r.label}
          </button>
        ))}
      </div>
    </div>
  );
}

31:T1620,

import { AspectRatio } from "@/components/scalar-ui/aspect-ratio";

export default function Example() {
  return (
    <figure className="w-full max-w-[440px]">
      <AspectRatio ratio={16 / 9}>
        <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=880&h=495&fit=crop&auto=format&q=75" alt="Mountain ridges above the clouds" />
      </AspectRatio>
      <figcaption className="mt-2.5 flex justify-between text-[12.5px] text-neutral-500 dark:text-neutral-400">
        <span>Dolomites, early morning</span>
        <span className="tabular-nums">16:9</span>
      </figcaption>
    </figure>
  );
}

32:T1ed0,

import { AspectRatio } from "@/components/scalar-ui/aspect-ratio";

const ratios = [
  { label: "1:1", value: 1 },
  { label: "4:5", value: 4 / 5 },
  { label: "4:3", value: 4 / 3 },
  { label: "16:9", value: 16 / 9 },
];

export default function Example() {
  return (
    <div className="grid w-full max-w-[560px] grid-cols-2 items-end gap-4 sm:grid-cols-4">
      {ratios.map((r) => (
        <AspectRatio
          key={r.label}
          ratio={r.value}
          className="bg-[radial-gradient(circle,rgb(0_0_0/0.12)_1px,transparent_1.25px)] bg-[length:10px_10px] dark:bg-[radial-gradient(circle,rgb(255_255_255/0.12)_1px,transparent_1.25px)]"
        >
          <span className="absolute inset-0 grid place-items-center font-mono text-[13px] font-medium text-neutral-500 dark:text-neutral-400">{r.label}</span>
        </AspectRatio>
      ))}
    </div>
  );
}

33:T74e,"use client"; import { Play } from "lucide-react"; import { useState } from "react"; import { AspectRatio } from "@/components/scalar-ui/aspect-ratio"; export default function Example() { const [playing, setPlaying] = useState(false); return (

{playing ? (

); } 34:T328e,

"use client";

import { Play } from "lucide-react";
import { useState } from "react";
import { AspectRatio } from "@/components/scalar-ui/aspect-ratio";

export default function Example() {
  const [playing, setPlaying] = useState(false);
  return (
    <div className="w-full max-w-[460px]">
      <AspectRatio ratio={16 / 9} className="bg-neutral-950">
        {playing ? (
          <video src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" controls autoPlay playsInline className="size-full object-cover" />
        ) : (
          <button onClick={() => setPlaying(true)} aria-label="Play video" className="group absolute inset-0 outline-none">
            <img
              src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=920&h=518&fit=crop&auto=format&q=75"
              alt=""
              className="size-full object-cover transition-transform duration-500 ease-out group-hover:scale-[1.02]"
            />
            <span className="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent" />
            <span className="absolute left-1/2 top-1/2 flex size-14 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-white/90 text-neutral-950 shadow-[0_8px_24px_-6px_rgb(0_0_0/0.4)] backdrop-blur transition-transform duration-200 group-hover:scale-105 group-focus-visible:scale-105 group-active:scale-95">
              <Play className="ml-0.5 size-5 fill-current" />
            </span>
            <span className="absolute bottom-3 left-3.5 text-left text-[13.5px] font-medium text-white">Spring in the valley</span>
            <span className="absolute bottom-3 right-3.5 rounded-md bg-black/50 px-1.5 py-0.5 text-[11.5px] font-medium tabular-nums text-white backdrop-blur">0:05</span>
          </button>
        )}
      </AspectRatio>
    </div>
  );
}

35:T401,import { AspectRatio } from "@/components/scalar-ui/aspect-ratio"; const shots = [ { src: "https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=480&h=600&fit=crop&auto=format&q=75", title: "Ridge walk", meta: "4:5" }, { src: "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=480&h=600&fit=crop&auto=format&q=75", title: "Morning fog", meta: "4:5" }, ]; export default function Example() { return (

{shots.map((s) => (

))}

); } 36:T2736,

import { AspectRatio } from "@/components/scalar-ui/aspect-ratio";

const shots = [
  { src: "https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=480&h=600&fit=crop&auto=format&q=75", title: "Ridge walk", meta: "4:5" },
  { src: "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=480&h=600&fit=crop&auto=format&q=75", title: "Morning fog", meta: "4:5" },
];

export default function Example() {
  return (
    <div className="grid w-full max-w-[420px] grid-cols-2 gap-4">
      {shots.map((s) => (
        <figure key={s.title}>
          <AspectRatio variant="framed" ratio={4 / 5}>
            <img src={s.src} alt={s.title} />
          </AspectRatio>
          <figcaption className="mt-2 flex justify-between px-1 text-[12.5px]">
            <span className="font-medium text-neutral-800 dark:text-neutral-200">{s.title}</span>
            <span className="tabular-nums text-neutral-400 dark:text-neutral-500">{s.meta}</span>
          </figcaption>
        </figure>
      ))}
    </div>
  );
}

29:["$","section","aspect-ratio",{"id":"aspect-ratio","aria-labelledby":"aspect-ratio-title","className":"scroll-mt-24","children":[["$","header",null,{"className":"mb-5 flex flex-wrap items-start justify-between gap-4","children":[["$","div",null,{"className":"min-w-0 max-w-2xl","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h2",null,{"id":"aspect-ratio-title","className":"sr-only","children":"Aspect Ratio"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"radix-ui"}]]}],false]}],["$","$L2b",null,{"children":["$","$L2c",null,{"slug":"aspect-ratio","gated":{"unlocked":true,"files":[{"name":"aspect-ratio.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"$2f","html":"$30"}],"examples":{"image":{"name":"image.tsx","code":"import { AspectRatio } from \"@/components/scalar-ui/aspect-ratio\";\n\nexport default function Example() {\n return (\n

\"Mountain — \n Dolomites, early morning\n 16:9\n

\n );\n}\n","html":"$31"},"ratios":{"name":"ratios.tsx","code":"import { AspectRatio } from \"@/components/scalar-ui/aspect-ratio\";\n\nconst ratios = [\n { label: \"1:1\", value: 1 },\n { label: \"4:5\", value: 4 / 5 },\n { label: \"4:3\", value: 4 / 3 },\n { label: \"16:9\", value: 16 / 9 },\n];\n\nexport default function Example() {\n return (\n

\n {ratios.map((r) => (\n \n {r.label}\n \n ))}\n

\n );\n}\n","html":"$32"},"video":{"name":"video.tsx","code":"$33","html":"$34"},"framed":{"name":"framed.tsx","code":"$35","html":"$36"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add aspect-ratio","shadcn":"npx shadcn@latest add https://scalarui.com/r/aspect-ratio.json","shadcnConfig":"{\n \"registries\": {\n \"@scalar-ui\": {\n \"url\": \"https://scalarui.com/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${SCALAR_TOKEN}\"\n }\n }\n }\n}","mcpClaude":"claude mcp add scalar-ui \\\n -e SCALAR_TOKEN=slk_your_token \\\n -e SCALAR_URL=https://scalarui.com \\\n -- npx -y @scalardesign/mcp","mcpJson":"{\n \"mcpServers\": {\n \"scalar-ui\": {\n \"command\": \"npx\",\n \"args\": [\n \"-y\",\n \"@scalardesign/mcp\"\n ],\n \"env\": {\n \"SCALAR_TOKEN\": \"slk_your_token\",\n \"SCALAR_URL\": \"https://scalarui.com\"\n }\n }\n }\n}","npm":"npm install radix-ui","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L37","toolbar":"$L38"}]}],["$L39","$L3a","$L3b","$L3c"]]}]

Aspect Ratios

Aspect Ratios

Image

Ratios

Video

Framed