shadcn.io is not affiliated with official shadcn/ui

Shadcn Aspect Ratio for React and Tailwind

Wrapper that maintains aspect ratio for content.

1:1

Installation

bunx --bun shadcn@latest add https://kit.dev/r/aspect-ratio.json

pnpm dlx shadcn@latest add https://kit.dev/r/aspect-ratio.json

npx shadcn@latest add https://kit.dev/r/aspect-ratio.json

yarn shadcn@latest add https://kit.dev/r/aspect-ratio.json

Install the following dependencies:

bun add @ark-ui/react

pnpm add @ark-ui/react

npm install @ark-ui/react

yarn add @ark-ui/react

Copy and paste the following code into your project.

components/ui/aspect-ratio.tsx

"use client";

import { ark } from "@ark-ui/react/factory";
import type React from "react";
import { cn } from "@/lib/utils";

interface AspectRatioProps extends React.ComponentProps<typeof ark.div> {}

export const AspectRatio = (props: AspectRatioProps) => {
  const { className, ...rest } = props;

  return (
    <ark.div
      className={cn(
        "[--ratio:1]",
        "relative",
        "w-full min-w-0",
        "aspect-(--ratio)",
        className
      )}
      data-slot="aspect-ratio"
      {...rest}
    />
  );
};

Update the import paths to match your project setup.

Usage

import { AspectRatio } from "@/components/ui/aspect-ratio";

<AspectRatio className="w-full max-w-64 rounded-xl border bg-muted">
  <div className="flex size-full items-center justify-center">
    <span className="select-none text-muted-foreground text-xs">1:1</span>
  </div>
</AspectRatio>

Demos

Portrait

Responsive

Square

Video

API Reference

AspectRatio

div

PropType

AttributeType

CSS variableType

Announcement

Autocomplete