Static UIStatic UI Docs
HomeComponentsBlocksTemplatesThemesShowcaseStorybookGitHub

Getting Started

  • Introduction
  • Installation
  • Theming
  • CLI

Components

  • Accordion
  • Alert
  • Alert Dialog
  • Aspect Ratio
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Calendar
  • Card
  • Carousel
  • Checkbox
  • Collapsible
  • Context Menu
  • Dialog
  • Drawer
  • Dropdown Menu
  • Hover Card
  • Input
  • Input Group
  • Input OTP
  • Kbd
  • Label
  • Number Field
  • Pagination
  • Popover
  • Progress
  • Radio Group
  • Scroll Area
  • Select
  • Separator
  • Sidebar
  • Skeleton
  • Slider
  • Sonner
  • Spinner
  • Switch
  • Table
  • Tabs
  • Textarea
  • Toast
  • Toggle
  • Toggle Group
  • Tooltip
  • Typography

Blocks

  • Overview
  • Dashboard 01
  • Dashboard 02
  • Login 01
  • Login 02
  • Pricing 01
  • Pricing 02
  • Hero 01
  • Hero 02
  • Feature 01
  • Feature 02

Templates

  • Overview
  • Marketing
  • Dashboard
  • Auth

Themes

  • Overview
  • Green
  • Blue
  • Zinc
  • Slate
  • Gaming
  • Cyberpunk
  • Modern

Showcase

  • Showcase

Developers

  • Architecture
  • Monorepo Structure
  • Development Workflow
  • Contributing
  • Testing
  • Release Process
  • Commit Conventions
  • Versioning
  • CI/CD
  • Project Health

Getting Started

  • Introduction
  • Installation
  • Theming
  • CLI

Components

  • Accordion
  • Alert
  • Alert Dialog
  • Aspect Ratio
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Calendar
  • Card
  • Carousel
  • Checkbox
  • Collapsible
  • Context Menu
  • Dialog
  • Drawer
  • Dropdown Menu
  • Hover Card
  • Input
  • Input Group
  • Input OTP
  • Kbd
  • Label
  • Number Field
  • Pagination
  • Popover
  • Progress
  • Radio Group
  • Scroll Area
  • Select
  • Separator
  • Sidebar
  • Skeleton
  • Slider
  • Sonner
  • Spinner
  • Switch
  • Table
  • Tabs
  • Textarea
  • Toast
  • Toggle
  • Toggle Group
  • Tooltip
  • Typography

Blocks

  • Overview
  • Dashboard 01
  • Dashboard 02
  • Login 01
  • Login 02
  • Pricing 01
  • Pricing 02
  • Hero 01
  • Hero 02
  • Feature 01
  • Feature 02

Templates

  • Overview
  • Marketing
  • Dashboard
  • Auth

Themes

  • Overview
  • Green
  • Blue
  • Zinc
  • Slate
  • Gaming
  • Cyberpunk
  • Modern

Showcase

  • Showcase

Developers

  • Architecture
  • Monorepo Structure
  • Development Workflow
  • Contributing
  • Testing
  • Release Process
  • Commit Conventions
  • Versioning
  • CI/CD
  • Project Health

© 2026 Static UI. Built open-source for modern developers.

DocsStorybookGitHub
  1. Docs
  2. Components
  3. Aspect Ratio

Aspect Ratio

Layout

Displays content within a desired ratio while preserving the element's intrinsic dimensions.

Loading component...

Installation

Run the following command to add this component to your project:

$pnpm dlx static-ui add aspect-ratio

Import

Import the component directly from the package:

import { AspectRatio } from "@static-ui/ui"

API Reference

Common props available for this component:

PropTypeDescription
classNamestringAdditional CSS classes to apply.

Related Components

AccordionVertically stacked interactive headings with reveal panels.
CardBounded content container.
CarouselHorizontally scrolling item sets.
CollapsibleExpandable content sections.
Scroll AreaCustom styled scroll container.
SeparatorVisual content divider.
TabsTabbed content panels.