Desktop Mockup Carousel React component
A realistic Studio Display-style monitor mockup with an internal video/image carousel, swipe or auto-advance, slide/fade transitions, 3D cursor tilt, ambient glow, and a progress bar.
About the Desktop Mockup Carousel component
Desktop Mockup Carousel is a free Studio Display-style monitor on a stand. Its 16:9 screen plays a sequence of videos and images with a progress bar, dot indicators and a slide or fade transition. A glare moves across the screen as the monitor tilts, and an ambient glow can sit behind it.
Fill video1 to video3, image1 and image2, and set the order with mediaOrder. imageDuration (default 3) is how many seconds each image stays. displayWidth (default 680) is the maximum width, and the display, neck and base scale down together to fit the container. frameColor is "Silver" or "Space Black" and videoTransition defaults to "Slide". The screen is a keyboard-focusable carousel that responds to the Left and Right arrow keys, and it pauses when off screen.
When to use it
Use it to show desktop software, web dashboards and marketing site walkthroughs in hero sections and on feature pages.
For a browser window with tabs and an address bar, use Browser Mockup.
Installation
Add the Desktop Mockup Carousel component to your project with the shadcn CLI. It lands in components/desktop-mockup-carousel.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/desktop-mockup-carouselOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<DesktopMockupCarousel /> accepts 21 props, all optional.
| Prop | Type | Default |
|---|---|---|
| video1 | string | "" |
| video2 | string | "" |
| video3 | string | "" |
| image1 | string | "" |
| image2 | string | "" |
| mediaOrder | ("V1" | "V2" | "V3" | "I1" | "I2")[] | ["V1", "V2", "V3", "I1", "I2"] |
| imageDuration | number | 3 |
| autoplay | boolean | true |
| loop | boolean | true |
| displayWidth | number | 680 |
| frameColor | "Silver" | "Space Black" | "Silver" |
| frameShadow | boolean | true |
- video1stringDefault: ""
- video2stringDefault: ""
- video3stringDefault: ""
- image1stringDefault: ""
- image2stringDefault: ""
- mediaOrder("V1" | "V2" | "V3" | "I1" | "I2")[]Default: ["V1", "V2", "V3", "I1", "I2"]
- imageDurationnumberDefault: 3
- autoplaybooleanDefault: true
- loopbooleanDefault: true
- displayWidthnumberDefault: 680
- frameColor"Silver" | "Space Black"Default: "Silver"
- frameShadowbooleanDefault: true
Show all 21 propsShow fewer
| tilt | boolean | false |
| tiltStrength | number | 12 |
| ambientGlow | boolean | false |
| glowColor | string | "#6060FF" |
| glowIntensity | number | 40 |
| progressBar | boolean | true |
| videoTransition | "Slide" | "Fade" | "Slide" |
| background | string | "rgba(0,0,0,0)" |
| className | string | — |
- tiltbooleanDefault: false
- tiltStrengthnumberDefault: 12
- ambientGlowbooleanDefault: false
- glowColorstringDefault: "#6060FF"
- glowIntensitynumberDefault: 40
- progressBarbooleanDefault: true
- videoTransition"Slide" | "Fade"Default: "Slide"
- backgroundstringDefault: "rgba(0,0,0,0)"
- classNamestring
Kits
Sets of components designed to be used together on one site, Desktop Mockup Carousel included.
Collections
Use-case pages that compare Desktop Mockup Carousel with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Desktop Mockup Carousel FAQ
- Does it jump in size when the page loads?
- No. It measures its container before the first paint, so the display doesn't flash at displayWidth and then snap to the fitted size.
- Why does my video loop instead of moving on?
- loop defaults to true. Set loop={false} so each video moves to the next item when it ends.
- Can I remove the shadow?
- frameShadow={false} removes the shadows under the display and the stand.
- How do I turn on the tilt?
- Set tilt={true}. tiltStrength defaults to 12 degrees.
