Frame

Rounded media container for screenshots, product shots and illustrations. Clips children (an <img>, <video> or any markup) to large Apple-style corners and optionally floats them with a frame shadow.

Your screenshot here

<Frame radius="3xl">
  <img src="/dashboard.png" alt="Dashboard" />
</Frame>

Install

npx shadcn@latest add @dami/frame

Or without the namespace: npx shadcn@latest add https://ui.dami.uy/r/frame.json

Source

import * as React from "react"
import { cn } from "@/registry/dami/lib/utils"

type FrameProps = React.ComponentProps<"div"> & {
  /** Corner radius preset. */
  radius?: "lg" | "xl" | "2xl" | "3xl"
  /** Adds a hairline ring and deep soft shadow, like a floating app window. */
  elevated?: boolean
}

/**
 * Rounded media container for screenshots, product shots and illustrations.
 * Clips children (an <img>, <video> or any markup) to large Apple-style
 * corners and optionally floats them with a frame shadow.
 */
function Frame({
  radius = "3xl",
  elevated = true,
  className,
  ...props
}: FrameProps) {
  return (
    <div
      data-slot="frame"
      className={cn(
        "relative overflow-hidden bg-card",
        radius === "lg" && "rounded-lg",
        radius === "xl" && "rounded-xl",
        radius === "2xl" && "rounded-2xl",
        radius === "3xl" && "rounded-3xl",
        elevated && "shadow-frame",
        "[&_img]:block [&_img]:h-full [&_img]:w-full [&_img]:object-cover [&_video]:block [&_video]:h-full [&_video]:w-full [&_video]:object-cover",
        className
      )}
      {...props}
    />
  )
}

export { Frame }