# Laptop frame (goodtabs UI)

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

## Install

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

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/laptop-frame`

## Usage

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

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

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| width | `string` | `"560px"` | Maximum width of the lid. The base overhangs it by 4 percent each side. |

## 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

## Notes for agents

- 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.

Docs: https://ui.goodtabs.co/components/laptop-frame