Mockups

Device Stack

new

A MacBook with an iPhone standing in front of one corner, the usual hero composition.

OverviewM

Revenue$53.4k

Customers2,318

Retention118%

Monthly revenue

9:41

Overview

Revenue

$53.4k

+15%

ACAcme Corp$4,200

GXGlobex$1,850

INInitech$3,120

Installation

npx shadcn@latest add @blank/device-stack

Usage

import { DeviceStack } from "@/components/ui/device-stack"

<DeviceStack
  desktop={<img src="/dashboard.png" alt="" className="size-full object-cover" />}
  mobile={<img src="/dashboard-mobile.png" alt="" className="size-full object-cover" />}
/>

Both devices are sized in percent of the stack, so the overlap is the same at every width; set the size of the whole composition with a width class. The installer brings in the MacBook Frame and iPhone Frame it is built from.

Examples

Phone on the left

Now in beta

The calm way to run your finances

Invoices, payouts and forecasts in one quiet dashboard.

Start freeBook a demo

Acme

Now in beta

The calm way to run your finances

Start free