CatalystLayout and structure
Aspect Ratiov0.2.1Ready for Production
A primitive component for maintaining consistent aspect ratios for media content, particularly images.
Prefer AI-assisted development?
This documentation is available via the Catalyst MCP Server. Learn how to connect →
Catalyst Aspect Ratio is a small wrapper around Radix's aspect-ratio primitive for keeping media at a consistent ratio with minimal setup.
Preview
Installation
npm install @pmi/catalyst-aspect-ratioimport { AspectRatio } from '@pmi/catalyst-aspect-ratio';Variants
1:1 Variant
The default variant is 1:1 (square aspect ratio):
Preview
16:9 Variant
Perfect for widescreen content and landscape imagery:
Preview
2:3 Variant
Ideal for portrait-oriented content:
Preview
Custom Ratio
You can specify a custom aspect ratio using the ratio prop:
Preview
API Reference
AspectRatio
Accepts all standard props from the underlying Radix UI Aspect Ratio primitive.
Prop
Type
Choosing the Right Component
Use AspectRatio when you need a reusable Catalyst wrapper for keeping media or other content at a consistent ratio. Reach for a different option when:
| If you need… | Use instead |
|---|---|
| the unstyled Radix primitive without Catalyst wrappers | Radix UI Aspect Ratio |
| a one-off layout and want to style it directly with Tailwind utility classes | plain HTML with Tailwind aspect ratio utilities (for example, an aspect-* classname) |