"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export type DeviceFrameVariant = "phone" | "tablet" | "laptop" | "browser";

export interface DeviceFrameProps
  extends React.HTMLAttributes<HTMLDivElement> {
  variant?: DeviceFrameVariant;
  imageSrc?: string;
  imageAlt?: string;
}

const defaultImage =
  "https://images.unsplash.com/photo-1489515217757-5fd1be406fef?auto=format&fit=crop&w=1200&q=80";

export function DeviceFrame({
  variant = "browser",
  imageSrc = defaultImage,
  imageAlt = "Device preview",
  className,
  ...props
}: DeviceFrameProps) {
  if (variant === "phone") {
    return (
      <div className={cn("mx-auto w-56", className)} {...props}>
        <div className="rounded-[2.4rem] border border-border bg-card p-3 shadow-sm">
          <div className="relative overflow-hidden rounded-[2rem] border border-border bg-muted">
            <div className="absolute left-1/2 top-3 h-1.5 w-16 -translate-x-1/2 rounded-full bg-muted" />
            <img
              src={imageSrc}
              alt={imageAlt}
              className="h-96 w-full object-cover"
            />
          </div>
        </div>
      </div>
    );
  }

  if (variant === "tablet") {
    return (
      <div className={cn("mx-auto w-[420px]", className)} {...props}>
        <div className="rounded-[2.5rem] border border-border bg-card p-4 shadow-sm">
          <div className="relative overflow-hidden rounded-[2rem] border border-border bg-muted">
            <div className="absolute right-6 top-3 h-2 w-2 rounded-full bg-muted" />
            <img
              src={imageSrc}
              alt={imageAlt}
              className="h-72 w-full object-cover"
            />
          </div>
        </div>
      </div>
    );
  }

  if (variant === "laptop") {
    return (
      <div className={cn("mx-auto w-[520px]", className)} {...props}>
        <div className="rounded-2xl border border-border bg-card p-3 shadow-sm">
          <div className="overflow-hidden rounded-xl border border-border bg-muted">
            <img
              src={imageSrc}
              alt={imageAlt}
              className="h-64 w-full object-cover"
            />
          </div>
        </div>
        <div className="mx-auto mt-2 h-3 w-[70%] rounded-full border border-border bg-muted" />
      </div>
    );
  }

  return (
    <div className={cn("mx-auto w-[640px]", className)} {...props}>
      <div className="rounded-2xl border border-border bg-card shadow-sm">
        <div className="flex items-center gap-2 border-b border-border bg-muted/40 px-4 py-2">
          <span className="h-3 w-3 rounded-full border border-border bg-muted" />
          <span className="h-3 w-3 rounded-full border border-border bg-muted" />
          <span className="h-3 w-3 rounded-full border border-border bg-muted" />
          <div className="ml-4 flex-1 rounded-full border border-border bg-card px-3 py-1 text-xs text-muted-foreground">
            ui-destination.app
          </div>
        </div>
        <div className="overflow-hidden rounded-b-2xl bg-muted">
          <img
            src={imageSrc}
            alt={imageAlt}
            className="h-72 w-full object-cover"
          />
        </div>
      </div>
    </div>
  );
}
Device Frame

Dependencies

Files

Installation
