Skip to content
goodtabs UI
BrowseBrowse components

Laptop frame

A generic laptop drawn in hairlines, around a screenshot or live UI.

npx shadcn@latest add https://ui.goodtabs.co/r/laptop-frame.json

With the @goodtabs namespace in components.json: npx shadcn@latest add @goodtabs/laptop-frame

Components

Pieces you own after one command.

Theme tokens only, so they match your project.

A 16:10 screen holding a heading and two lines.

Screenshot

Stacked monochrome blocks

An image fills the screen edge to edge.

Live dashboard

CampaignsAudienceReports

Last send

Open rate42.1%
Click rate8.6%
Unsubscribes0.2%

A sidebar and a small table built from markup, not an image.

Usage

import { LaptopFrame } from "@/components/ui/laptop-frame"

<LaptopFrame width="640px">
  <img src="/dashboard.png" alt="The dashboard" className="size-full object-cover" />
</LaptopFrame>

Props

PropTypeDefaultDescription
widthstring"560px"Maximum width of the lid. The base overhangs it by 4 percent each side.

Source

laptop-frame/laptop-frame.tsx
import * as React from "react";
import { cn } from "@/lib/utils";

type LaptopFrameProps = React.ComponentProps<"div"> & {
  /** Width of the lid, for example "560px". The base is a little wider. */
  width?: string;
};

/**
 * A generic laptop drawn in hairlines. Not modelled on any real device.
 * Children fill a 16:10 screen; a slim base sits underneath with a thumb notch.
 */
export function LaptopFrame({ width = "560px", className, style, children, ...props }: LaptopFrameProps) {
  return (
    <div className={cn("w-full", className)} style={{ maxWidth: width, ...style }} {...props}>
      <div className="rounded-t-xl border border-b-0 bg-muted p-2 pb-0">
        <div className="aspect-[16/10] overflow-hidden rounded-t-md border border-b-0 bg-background">{children}</div>
      </div>
      <div className="relative -mx-[4%] h-2.5 rounded-b-xl border bg-muted" aria-hidden="true">
        <div className="absolute top-0 left-1/2 h-1 w-1/6 -translate-x-1/2 rounded-b-md border border-t-0 bg-background" />
      </div>
    </div>
  );
}

For AI agents

Hand your agent this page, the markdown at /components/laptop-frame/prompt.md, or the Copy AI prompt button above.

When to use

  • Showing a desktop app or dashboard where a browser frame would be wrong
  • A hero visual that needs a physical sense of scale

When not to use

  • A website in a browser, where browser-frame is the better fit
  • When you need a specific device; this is deliberately generic

Agent notes

  • Server component; the screen is 16:10 and clips its children, so images want size-full object-cover
  • The base is decorative and aria-hidden
  • Colours are theme tokens only, so the frame follows light and dark mode

The maths

  • The screen is 16 : 10, a ratio of 1.6, the common laptop panel shape.
  • The base is 100 + 2 × 4 = 108 percent of the lid, so it overhangs by 4 percent each side.