Chuv Studio

02 — COMPONENTS

Aspect Ratio

Structural media container that preserves width and height proportion for project covers, mockups, thumbnails, screenshots, and video surfaces. Built from shadcn/ui and aligned with the Chuv Studio section rules.

Ratios

Common formats for portfolio, interface captures, and visual storytelling

16 / 9
Preview

Featured project cover

Best for hero banners, horizontal showcases, and presentation frames.

<AspectRatio ratio={16 / 9}>
  {/* media */}
</AspectRatio>
4 / 3
Preview

Desktop product shot

Works well for dashboard previews and broader interface crops.

<AspectRatio ratio={4 / 3}>
  {/* media */}
</AspectRatio>
1 / 1
Preview

Square thumbnail

Useful for grids, categories, previews, and social-friendly covers.

<AspectRatio ratio={1}>
  {/* media */}
</AspectRatio>
9 / 16
Preview

Mobile screen

Ideal for app flows, stories, shorts, or tall UI captures.

<AspectRatio ratio={9 / 16}>
  {/* media */}
</AspectRatio>

Studio Contexts

How aspect ratio supports the real sections of a design and tech studio

Portfolio Cover

Preview

Launch Story

Project cover with strong hero proportion.

Tool Preview

Preview

Design Ops Board

UI frame for internal systems and technical workflows.

Mobile Narrative

Preview

App Flow

Tall composition for mobile-first product sections.

<AspectRatio ratio={16 / 9}>
  <img className="h-full w-full rounded-none object-cover" src="/..." alt="" />
</AspectRatio>

Content Patterns

Same ratio system, different content types

Image
Preview

Image Placeholder

Use object-cover imagery while keeping the frame stable.

<AspectRatio ratio={16 / 9}>
  <img
    src="/image.jpg"
    alt="Project cover"
    className="h-full w-full rounded-none object-cover"
  />
</AspectRatio>
Video
Preview

Video Surface

Use as a safe container for embeds, reels, or preview players.

<AspectRatio ratio={16 / 9}>
  <iframe
    className="h-full w-full rounded-none"
    src="..."
    title="Demo video"
  />
</AspectRatio>
Card media
Preview

Card Cover

Media can live directly inside a foundation card without changing the ratio logic.

<div className="rounded-none border border-white bg-[#f9f9f9] p-[var(--card-padding)]">
  <AspectRatio ratio={4 / 3}>{/* media */}</AspectRatio>
</div>

Interactive Demo

Preview ratio, content mode, and dark background

Ratio

Content

Preview

Case Cover

Hero frame for project overviews and featured portfolio entries.

<AspectRatio ratio={16 / 9}>
  <div className="h-full w-full rounded-none border border-white bg-[#f9f9f9]">
    {/* visual content */}
  </div>
</AspectRatio>

Usage

Import, props, and implementation notes

Import

import { AspectRatio } from "@/components/ui/aspect-ratio"

Props

ratio

number

Required proportion, e.g. 16 / 9 or 4 / 3

children

React.ReactNode

Media or placeholder content rendered inside the frame

className

string

Optional layout or spacing overrides

Accessibility

  • Aspect ratio itself is structural, so accessibility depends on the content placed inside it.
  • Always provide meaningful alt text for images and descriptive titles for iframes or embedded video.
  • Keep the internal media frame aligned to the foundation with rounded-none.