jsp-dsv0.1

Aspect ratioshadcn

Holds content at a fixed shape.

Data display
Install
npx shadcn add aspect-ratio
Import from
@/components/ui/aspect-ratio
Guidance
draft · v0.1.0

Examples

As installed from shadcn – rendering in jsp-ds tokens through the bridge.

16 : 9
Keep media at a fixed shape as the width changes.

Guidance

When to use

  • Images, video, maps and embeds that must keep their shape as the width changes.

Rules

  • Pick the ratio of the media: 16:9 for video, 4:3 or 1:1 for thumbnails.
  • Images inside need alt text, or alt="" if they're decorative.

Install

Terminal
npx shadcn add aspect-ratio
Import
import { AspectRatio } from "@/components/ui/aspect-ratio"

From shadcn’s own registry. Don’t edit the installed file – jsp-ds styles it through the bridge, and fixes go in styles/overrides.css with an issue.