// Layout

Aspect Ratio

Wrapper that maintains aspect ratio for content.

// Rendering preview…

// Install

npx shadcn@latest add @dakik/aspect-ratio

// Usage

1import { AspectRatio } from "@/components/ui/aspect-ratio";
2
3<AspectRatio />

// Code

1"use client";
2
3import { ark } from "@ark-ui/react/factory";
4import type React from "react";
5import { cn } from "@/lib/utils";
6
7interface AspectRatioProps extends React.ComponentProps<typeof ark.div> {}
8
9export const AspectRatio = (props: AspectRatioProps) => {
10  const { className, ...rest } = props;
11
12  return (
13    <ark.div
14      className={cn(
15        "[--ratio:1]",
16        "relative",
17        "w-full",
18        "aspect-(--ratio)",
19        className
20      )}
21      data-slot="aspect-ratio"
22      {...rest}
23    />
24  );
25};
26

// Dependencies

@ark-ui/react