edbnedbn/ui
ComponentsMapsPDF
GitHub stars
Explorer
Get Started
Components

Aspect Ratio

A CSS aspect-ratio wrapper component for maintaining consistent proportions.

Componentsdocsdeveloper.mozilla.org/aspect-ratio

Installation

npx shadcn@latest add https://ui.edbn.me/api/analytics/registry/aspect-ratio.json

Manual

API Reference

AspectRatio

Native CSS aspect-ratio wrapper. Renders a div element and forwards its ref.

rationumber
=1

Width-to-height ratio passed to the CSS aspect-ratio property.

classNamestring

CSS class name merged onto the root element.

styleReact.CSSProperties

Inline styles merged after the ratio style, allowing explicit overrides.

childrenReact.ReactNode

Content rendered inside the ratio box.

refReact.Ref<HTMLDivElement>

Forwarded to the root div element.

...propsReact.ComponentPropsWithoutRef<'div'>

All native div attributes are supported.

AspectRatio data attributes
AttributeDescription
data-slot="aspect-ratio"Identifies the root slot for styling and inspection.