Device Stage
A free React product showcase that composes responsive screenshots into a dimensional device stage.
See it in action
Your product, clear on every screen
One workflow, composed for the screens your customers use every day.
Explore the product
Customise
Code
<ShowcaseDeviceStage
title="Your product, clear on every screen"
devices={devices}
/>Device Stage is a free React product showcase for Next.js and Tailwind that presents one to three product screenshots inside responsive desktop, tablet and phone frames. Intrinsic image dimensions and a reserved stage aspect ratio keep every composition stable while solo, duo and ecosystem layouts make the product readable across breakpoints.
Motion adds a once-only staggered entrance, restrained ambient float and fine-pointer perspective tilt without changing layout. Every loop pauses offscreen or in a hidden tab, while coarse pointers, reduced-motion visitors and no-JavaScript rendering retain the complete settled showcase.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/showcase-device-stageUsage
import { ShowcaseDeviceStage } from "@/components/showcase-device-stage";
const devices = [
{
id: "desktop",
type: "desktop" as const,
src: "/product/dashboard.webp",
alt: "Desktop dashboard showing project health and recent activity",
width: 1440,
height: 900,
},
{
id: "phone",
type: "phone" as const,
src: "/product/mobile-review.webp",
alt: "Mobile approval screen for the same product workflow",
width: 720,
height: 1440,
},
];
export function Example() {
return (
<ShowcaseDeviceStage
title="Your product, clear on every screen"
devices={devices}
layout="duo"
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "See it in action" | Introductory label above the section heading. |
| title | string | required | Section heading rendered as an h2. |
| description | string | undefined | Optional supporting section copy. |
| cta | { label: string; href: string } | undefined | Optional call to action rendered as a real anchor. |
| devices | { id: string; type: "desktop" | "tablet" | "phone"; src: string; alt: string; width: number; height: number }[] | required | One to three stable-ID screenshots with meaningful alt text and intrinsic dimensions. |
| layout | "solo" | "duo" | "ecosystem" | "ecosystem" | Stage composition. Layouts that need more devices fall back to the closest complete composition. |
| perspective | number | 1100 | Static CSS perspective in pixels, clamped from 700 to 1800. |
| spread | number | 70 | Device spread in pixels, clamped from 24 to 120. |
| depth | number | 42 | Per-layer z depth in pixels, clamped from 12 to 72. |
| maxTilt | number | 5 | Fine-pointer stage tilt in degrees, clamped from 0 to 8. |
| floatDistance | number | 8 | Ambient vertical travel in pixels, clamped from 0 to 14. |
| className | string | undefined | Additional classes merged onto the section root. |
Customisation
Use the playground to change the composition, perspective, spread, layer depth, pointer tilt and float distance. Screenshot sources and copy remain authored in code, while frames, surfaces, borders, copy and focus rings inherit the site semantic tokens in both themes:
<ShowcaseDeviceStage
title="Your product, clear on every screen"
devices={devices}
layout="duo"
perspective={1280}
spread={84}
depth={52}
maxTilt={4}
floatDistance={6}
/>Frequently asked questions
- Is Device Stage free for commercial use?
- Yes. Device Stage is MIT licensed, so you can use it in personal and commercial projects without attribution.
- How does Device Stage protect performance and accessibility?
- Each screenshot has intrinsic dimensions, the stage reserves its final geometry and Motion writes only transforms and opacity. The entrance runs once, ambient controls pause offscreen and in hidden tabs, pointer movement updates motion values without React renders, and reduced motion removes entrance travel, floating and tilt while preserving every image and control.
- What can I customise in the product showcase?
- Choose solo, duo or ecosystem composition and tune perspective, spread, depth, maximum tilt and float distance. Supply your own one to three screenshots with stable IDs, meaningful alternative text and real intrinsic dimensions.