Component reference

AspectRatio

Keeps its content at a fixed width-to-height ratio.

Preview

Landscape and square

The ratio controls the media placeholder and images choose their own cropping; the width follows the parent container.

packages/meowtail/stories/foundations.stories.tsxline 77tsx

render: () => (
  <Measure>
    <Stack gap="relaxed">
      {[16 / 9, 1].map((ratio) => (
        <AspectRatio ratio={ratio} style={{ maxWidth: ratio === 1 ? "240px" : "100%" }}>
          <div
            style={{
              width: "100%",
              height: "100%",
              display: "grid",
              placeItems: "center",
              background: `${uiTokens.surface.fill}`,
              borderRadius: `${uiTokens.radius.lg}`,
              color: `${uiTokens.ink.secondary}`,
            }}
          >
            {ratio === 1 ? "1 : 1 · Project cover" : "16 : 9 · Demo preview"}
          </div>
        </AspectRatio>
      ))}
    </Stack>
  </Measure>
)

Installation

bun add meowtail

Usage

usage.tsts

import { AspectRatio } from "meowtail";

API reference

The ratio is layout, not a theme surface. Children choose their own media fitting.

Props

Prop	Type	Default
`ratio`	`number`	`16 / 9`

Also takes className, children and the attributes and events of its root element.

DOM parts

root

Registry

The component is registered as aspect-ratio in the meowtail component registry.