Stalk UI

Component

AspectRatio

Constrains content to a fixed width-to-height ratio.

Install

Run the CLI to copy the source into your project.

pnpm dlx @stalk-ui/cli add @stalk-ui/aspect-ratio

Examples

Live previews render through the docs app's PandaCSS codegen.

Theme
<div style={{ width: 320 }}>
  <AspectRatio ratio={16 / 9}>
    <img
      alt="Sand dunes under a clear sky"
      src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=640&h=360&fit=crop"
      style={{ borderRadius: 8 }}
    />
  </AspectRatio>
</div>
Theme
<div style={{ width: 200 }}>
  <AspectRatio ratio={1}>
    <div
      style={{
        alignItems: 'center',
        border: '1px solid var(--colors-border-default)',
        borderRadius: 8,
        color: 'var(--colors-fg-muted)',
        display: 'flex',
        justifyContent: 'center',
      }}
    >
      1 : 1
    </div>
  </AspectRatio>
</div>

Props

Public component props extracted from the source TypeScript types.

PropTypeRequiredDefaultDescription
`asChild``boolean`No-Render the single child element instead of a wrapping \`<div>\`.
`ratio``number`No-Desired width-to-height ratio (e.g. \`16 / 9\`). Defaults to \`1\` (square).

Variants

Variant axes exposed by the underlying PandaCSS recipe or slot recipe.

No recipe variants are documented for this component.

Registry

Files this component contributes to your registry install.

  • Manifest: `/r/aspect-ratio.json`
  • Recipe: ``
  • Files: `src/components/ui/aspect-ratio.tsx`