VibeUI
РусEng
Sign in
All1346Button124Input99Select40Card145Table33Dialog39Tabs14Badge33Avatar54Toast25Accordion32Alert35Button group77Calendar48Carousel28Chart36Checkbox & toggles59Code Block31Combobox62Command15Device Mockup10Dropdown menu32Empty20Loading32Navigation48Popover39Slider20Specialized inputs64Stepper29Tree19Typography4

Device Mockup

Window Stack

Three cascading browser windows in pure CSS: the front one full size, two behind peeking out, smaller and dimmed. Show several product screens in one frame without 3D.

React + Tailwind, shadcn-compatible: press “Copy for AI” and your Cursor or Claude Code agent installs it with the shadcn CLI.

What you can change

  • src and alt — the front window frame
  • backSrc and farSrc — the back window frames
  • children — a live page in the front window

A link for your AI agent: preview, code and instructions.

Preview

1440pxHost theme
Window Stack — Three cascading browser windows in pure CSS: the front one full size, two behind peeking out, smaller and dimmed. Show several product screens in one frame without 3D.

Use it with AI

  1. 1. Copy the link.
  2. 2. Write to your agent in your own words and drop the link into the sentence.
  3. 3. The agent opens the link and installs the component from the registry.
AI
1Pick it here

put this on the home page as the hero:

https://vibeui.club/c/mockup-009?lang=en&theme=dark

2Paste into the chat
3Get it in your project

Not sure where to paste it? Step-by-step guide

Show the full instructions

What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.

Loading…

How to use

<Mockup009 src="/screens/one.png" alt="Main screen" backSrc="/screens/two.png" farSrc="/screens/three.png" spread="normal" />

A sample call. The agent installs the component itself from the registry via the “Copy for AI” link.

Settings

Spread
spread · default: normal
Chrome
theme · default: light
Shadow
shadow · default: on
Caption
caption

More in Device Mockup

FAQ

How do I add Window Stack with Cursor or Claude Code?
Press “Copy for AI” on this page and paste it into your agent's chat. The instruction contains the shadcn CLI install command, the dependencies and what to keep, so the agent installs this exact component instead of recreating a lookalike.
What does Window Stack depend on?
No npm packages beyond React and Tailwind CSS.
What can I change in Window Stack?
Adapt: src and alt — the front window frame; backSrc and farSrc — the back window frames; children — a live page in the front window. Keep as installed: the local --vibeui-mockup-009-* palette — do not swap it for your theme tokens; deriving the shift, width and paddings from the one spread variable — hand-tuned values break the cascade; dimming the back windows with opacity and brightness — without it the stack reads as three equal windows.
Is Window Stack free?
The preview is open to everyone; the source is available with a PRO subscription.

For developers

npx shadcn@latest add https://vibeui.club/r/pro/mockup-009.json

This command needs a signed link: sign in and open “Component source” below — it issues a working link valid for 30 minutes. All install options

Technical notes

Server component, no hooks. The stack is a front window in flow and two absolute ones behind it shifted up-left; the shift, width and stage paddings derive from one variable --vibeui-mockup-009-spread set by data-spread. The back windows are dimmed with opacity and brightness so depth reads without perspective. The window chrome is minimal: traffic lights and an address field. The 16/10 area takes src (top-aligned object-fit: cover), otherwise children, otherwise a placeholder; the back windows take backSrc and farSrc and have placeholders with a different layout. Chrome theme via data-chrome, shadow via data-shadow.

Tags

  • browser
  • windows
  • stack
  • cascade
  • screens
  • mockup
  • frame
  • screenshot
Component source

The same file your agent installs. Here in case you would rather copy it by hand.

Loading…