Aspect Ratio

Holds media at a fixed ratio so the layout doesn't jump while it loads.

16 / 9 · video, hero

1 / 1 · thumbnail

Usage

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

<AspectRatio ratio={16 / 9}>
  <img src="/cover.jpg" alt="Project cover" className="size-full object-cover" />
</AspectRatio>

Use 16 / 9 for video and heroes, 1 for avatars and thumbnails, 4 / 3 for screenshots.
Put the placeholder on the AspectRatio itself (bg-surface-sunken), so empty and loading states keep the same shape.
Images inside need object-cover and real alt text.

Alert Dialog

A modal that interrupts to confirm an action. The user has to answer it; it doesn't close on an outside click.

Attachment

A file in a composer or message, with its upload state and actions.