@fictjs/aspect-ratio

Aspect-ratio primitive for Fict, modeled after @radix-ui/react-aspect-ratio. Constrains content to a desired ratio.

Part of ui-primitives, a port of Radix Primitives to Fict.

Installation

pnpm add @fictjs/aspect-ratio fict

Usage

/** @jsxImportSource fict */
import * as AspectRatio from '@fictjs/aspect-ratio'

export function Example() {
  return (
    <AspectRatio.Root ratio={16 / 9}>
      <img src="/cover.jpg" alt="Cover" style={{ width: '100%', height: '100%' }} />
    </AspectRatio.Root>
  )
}

Anatomy

• AspectRatio.Root (Root) — ratio (defaults to 1). Supports asChild. Renders a single div that maintains the given width-to-height ratio.

Exports

• Components: AspectRatio (Root).
• Types: AspectRatioProps.

Documentation

The API mirrors Radix, so the upstream Radix Aspect Ratio docs apply. See the ui-primitives overview and the architecture guide for the Fict-specific reactivity model.

License

MIT © Fict contributors.