Aspect Ratio

Disclosure & Layout · Guide 4 of 46

Open the live Aspect Ratio demo →

Purpose

Constrains content to a fixed width-to-height ratio.

Import

<script lang="ts">
	import { AspectRatio } from 'bits-ui';
</script>

The registry names AspectRatio as this guide’s namespace. Copy the exact root and part composition from the live demo rather than guessing part names.

Usage checklist

• Keep the reading and focus order logical with styles disabled.
• Preserve keyboard behavior and control-to-content relationships for interactive parts.
• Check constrained widths, overflow, and reduced-motion behavior.

Secondary reference

After using the local example, consult the upstream Bits UI reference for exhaustive API details.

Continue

• Previous: Tabs
• Index: All component guides
• Next: Scroll Area