Components
AspectRatio
A fixed-ratio content container.
Use AspectRatio to keep media or content at a fixed width-to-height ratio.
16:9
import { AspectRatio } from '@tile-ui/react';
export default function AspectRatioDemo() {
return (
<div style={{ width: '100%', maxWidth: '32rem' }}>
<AspectRatio ratio={16 / 9} style={{ background: 'var(--docs-surface-hover)' }}>Registry install
pnpm dlx shadcn@latest add @tile-ui/aspect-ratioPackage usage
import { AspectRatio } from '@tile-ui/react';
<AspectRatio ratio={16 / 9}>
<img src="https://example.com/poster.png" alt="Poster" />
</AspectRatio>Highlights
- Ratio prop
- Fills its container
Registry dependencies
| Item | Purpose |
|---|---|
aspect-ratio | Component source and module styles |
core | Framework-agnostic logic helpers |
styles | Shared SCSS tokens and globals |
API reference
AspectRatio
| Prop | Type | Default |
|---|---|---|
ratio | number | 1 |