AspectRatio

Keep media at a stable aspect ratio as its container resizes.

CoreBasics@gaudi/design-system/core/AspectRatioView in Storybook Source

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { AspectRatio } from '@gaudi/design-system/core/AspectRatio';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/aspect-ratio-common-ratios.json.

Usage

import { AspectRatio } from '@gaudi/design-system/core/AspectRatio';
<AspectRatio ratio={16 / 9}>  <img src={cover.src} alt={cover.alt} className='h-full w-full object-cover' /></AspectRatio>

Examples

Common ratios

Storybook

API

3 props

Accessibility

Supply alternative text for images and accessible names for embedded media.

AvatarProfile images, resilient initials, presence, verification, account menus and collaborator groups. The existing Avatar API and curated patterns share the same image and fallback primitives.10 examples ButtonButton renders the Gaudi action and link-button variants.7 examples ButtonGroupGroup related actions with joined borders and consistent sizing.9 examples CardCard frames reusable content with title, subtitle, and optional children.8 examples CheckboxCheckbox renders a token-styled binary control.6 examples FieldField composes form label, description, error, and input building blocks.7 examples