Aspect Ratio

Displays content within a desired ratio.

Source
API reference

Examples

Basic

PropDefaultTypeDescription
ratio1numberThe desired ratio. Eg: 16/9
Preview
Code
Abstract image

Variants and Colors

PropDefaultTypeDescription
aspect-ratiosoft-gray{variant}-{color}Change the styling of the aspect-ratio component.
VariantDescription
softAdds a light background color
outlineAdds a border with the specified color
~Unstyled variant (no default styling applied)
Preview
Code

Variant Examples

Default Variant

Primary Color

Orange Color

Success Color

Primary Outline

Error Outline

Different Ratio

Custom Styling

Rounded

PropDefaultTypeDescription
roundedmdstringSet the aspect-ratio to have rounded corners.
Preview
Code
Dark skyscraper silhouette
Tower
Abstract architecture patterns
Minimal
Geometric building architecture
Structure
Modern architectural building
Widescreen

Slots

NamePropsDescription
defaultaspectThe default slot.
Preview
Code
Nature landscape image40%

Title

Description of the card.

Presets

shortcuts/aspect-ratio.ts 
type AspectRatioPrefix = 'aspect-ratio'

export const staticAspectRatio: Record<`${AspectRatioPrefix}-${string}` | AspectRatioPrefix, string> = {
  // base
  'aspect-ratio': 'overflow-hidden',

  // static variants
  'aspect-ratio-soft-gray': 'bg-muted border border-base',
  'aspect-ratio-outline-gray': 'bg-base border border-base',
}

export const dynamicAspectRatio: [RegExp, (params: RegExpExecArray) => string][] = [
  [/^aspect-ratio-soft(-(\S+))?$/, ([, , c = 'gray']) => `bg-${c}-50 dark:bg-${c}-900 border-${c}-200 dark:border-${c}-700/58`],
  [/^aspect-ratio-outline(-(\S+))?$/, ([, , c = 'gray']) => `border border-${c}-200 dark:border-${c}-700/58`],
]

export const aspectRatio = [
  ...dynamicAspectRatio,
  staticAspectRatio,
]

Props

types/aspect-ratio.ts 
import type { AspectRatioProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'

interface BaseExtensions {
  class?: HTMLAttributes['class']
  rounded?: HTMLAttributes['class']
}

export interface NAspectRatioProps extends AspectRatioProps, BaseExtensions {
  /**
   * Allows you to add `UnaUI` aspect-ratio preset properties,
   * Think of it as a shortcut for adding options or variants to the preset if available.
   *
   * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/aspect-ratio.ts
   * @example
   * aspect-ratio="soft-primary"
   */
  aspectRatio?: string
  /**
   * `UnaUI` preset configuration
   *
   * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/aspect-ratio.ts
   */
  una?: {
    aspectRatio?: HTMLAttributes['class']
  }
}

Components

AspectRatio.vue
<script setup lang="ts">
import type { NAspectRatioProps } from '../../types/aspect-ratio'
import { reactiveOmit } from '@vueuse/core'
import { AspectRatio } from 'reka-ui'
import { cn } from '../../utils'

const props = withDefaults(defineProps<NAspectRatioProps>(), {
  aspectRatio: 'soft',
  rounded: 'md',
})

const delegatedProps = reactiveOmit(props, 'class')
</script>

<template>
  <AspectRatio
    v-slot="{ aspect }"
    v-bind="delegatedProps"
    :class="cn(
      'aspect-ratio',
      props.una?.aspectRatio,
      props.class,
    )"
    :aspect-ratio
    :rounded
  >
    <slot :aspect />
  </AspectRatio>
</template>
Edit this page on GitHub
Alert
Displays a callout for user attention.
Avatar
An image element with a fallback for representing the user.