Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Examples
  • Media proportions
  • Recommendations
  • Usage boundaries
  • API reference

Layout

Aspect Ratio

Reserves a fixed proportion for media with native CSS.

idle

Usage

import { AspectRatio } from "@mizen-labs/ui";

Examples

Media proportions

Recommendations

GuidancePractice
Do

Reserve the intended media proportion before loading. Choose image fitting that preserves meaningful content.

Usage boundaries

GuidanceBoundary
Scope

Aspect Ratio controls geometry. Image descriptions, loading, and media playback belong to the child content.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
rationumber16 / 9Finite positive width-to-height ratio.
childrenReactNodeRequiredContent fills the reserved frame. The caller chooses its media fit.
PreviousAccordionNextCard
Rows of lavender in Valensole under a clear sky
Rows of lavender under a pink evening sky