Device Mock

Flat, minimal frames for phone, browser and tablet. Thin border, soft shadow, quiet chrome, no side buttons, no island theater. Drop children or src into the screen.

Draw

draw a card

$npx shadcn@latest add @clow/device-mock

First time? Point @clow at the registry

Once per project, add the registry to your components.json. Then draw any card by name.

"registries": {
  "@clow": "https://clow.cards/r/{name}.json"
}

Full setup →

Playground

clow.dev/docs

clow

Screen content

Drop live UI or pass src / videoSrc.

props

kind

url

sakura

src

<DeviceMock />

Examples

basic

clow.dev

book open

The design system you draw

Cards as source. Pages underneath.

phone

mesh

Draw a card

One command. Source in the tree.

Props

prop	type	default
kind	browser \| phone \| tablet	browser
url	text	clow.dev/docs
sakura	boolean	false
src	text