Aspect RatioNew

A box that keeps its shape as it resizes, for an image, a video or a map.

$ pnpm dlx shadcn@latest add @dashral/aspect-ratio

Mountains above a valley at dawn — 16 / 9: the picture is cropped to fit, whatever its own size.

Installation

$ pnpm dlx shadcn@latest add @dashral/aspect-ratio

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Or by its full URL: https://dashral.com/r/aspect-ratio.json

Usage

example.tsx

1import { AspectRatio } from "@/components/dashral/aspect-ratio"
2
3<AspectRatio ratio={16 / 9} className="rounded-xl bg-muted">
4  <img src={post.cover} alt={post.coverAlt} />
5</AspectRatio>

Using the npm package? Import from @dashral/ui/components/aspect-ratio instead, here and in the examples; the rest is the same.

Examples

Ratios

ratio is width over height: 16 / 9, 4 / 3, 1, 3 / 4.

16 / 9

4 / 3

1 / 1

3 / 4

Blog post cards

Covers of every size line up at 3 / 2, so the titles start on one line.

GuideNov 4

Planning a release in two weeks

StoryOct 28

How Driftbox cut onboarding to a day

ProductOct 21

Six new components for forms

API reference

AspectRatio

Also takes every prop of Radix Aspect Ratio(opens in a new tab).

Prop	Type	Default
`ratio`	`number` Width over height: 4 / 3, 1 for a square, 3 / 4 for a portrait.	`16 / 9`
`className`	`string` The box's classes, e.g. a radius or a background. An <img> or <video> without classes fills it, cropped to fit.	—
`wrapperClassName`	`string` The wrapper that holds the ratio, e.g. a width (it's full width by default).	—

Accessibility

Only a box: the picture or video inside needs its own alt text or label.