---
title: Aspect Ratio
description: Displays content within a desired ratio.
source: apps/www/src/lib/registry/default/ui/aspect-ratio
primitive: https://www.radix-vue.com/components/aspect-ratio.html
---
## Installation
```bash
npx shadcn-vue@latest add aspect-ratio
```
### Install the following dependency:
```bash
npm install radix-vue
```
### Copy and paste the following code into your project:
```vue
```
### Update `tailwind.config.js`
Add the following to your `tailwind.config.js` file:
```ts
const { blackA } = require('@radix-ui/colors')
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./**/*.vue'],
theme: {
extend: {
colors: {
...blackA,
},
},
},
plugins: [],
}
```
## Usage
```vue
```