A fanned stack of app screenshots that shuffles on its own every 2.6 seconds, or on a click, a swipe or the arrow keys, the front window slides to the back and the rest step forward. The dots jump to a screen, the caption follows the front one, and hover or focus pauses it, there's a pause button too. A screen without an image falls back to a skeleton window that follows the theme. screens and interval are props. Light and dark via shadcn theme tokens, respects reduced motion. More dark, data-dense components at https://www.ssych.com/library?ref=21st.dev
import { useEffect } from "react"
import ScreenShuffle, { type ScreenShuffleScreen } from "@/components/ui/screen-shuffle"
const screens: ScreenShuffleScreen[] = [
{
id: "portfolio",
title: "Portfolio",
description: "Your whole book at a glance, with the 24h balance chart and every position behind it.",
image: "https://cdn.21st.dev/assets/mirror/fe/fe98c115a5ca24fb5f8bcc206755e8c2bdb9e9d7c58e40eaef35bce81bfdaadd.png",
alt: "Portfolio overview with a 24 hour balance chart, total balance and a holdings table",
},
{
id: "discover",
title: "Market discovery",
description: "Market cap, breadth, the day's leaders and laggards and what's trending, on one board.",
image: "https://cdn.21st.dev/assets/mirror/a2/a2bd44a7945a6d5932dcc78f512c99a064462d45730512823867573a7bc93e86.png",
alt: "Market discovery board with market cap stats, a 90 day chart and trending token cards",
},
{
id: "terminal",
title: "Trading terminal",
description: "Chart, order book and order ticket side by side, with open positions underneath.",
image: "https://cdn.21st.dev/assets/mirror/31/3123208250b04503fb367bd213c3f61e6871e59638e2dc2e9b0097387172d592.png",
alt: "Trading terminal with a candlestick chart, an order book, an order ticket and a positions table",
},
{
id: "allocation",
title: "Allocation",
description: "A treemap of where the money sits, with concentration and stablecoin share on top.",
image: "https://cdn.21st.dev/assets/mirror/b0/b0f0e13a60d1867de9b23cf3756d7227579e3f405c21ce870c6b8ed8c0eceead.png",
alt: "Allocation treemap of portfolio holdings above an asset table",
},
{
id: "screener",
title: "Token screener",
description: "Filter every listing by sector, cap share and 7 day trend.",
image: "https://cdn.21st.dev/assets/mirror/99/9959c4f747a6856ebfa31f6c27763609a9b993055ff3d1e7a9e609516a17ab42.png",
alt: "Token screener with sector filters and a sortable table of listings with 7 day sparklines",
},
]
export default function DemoOne() {
// open the preview in dark by default; the sandbox theme toggle still works
useEffect(() => { document.documentElement.classList.add("dark") }, [])
return (
<div className="flex w-full justify-center px-4 py-10">
<ScreenShuffle screens={screens} />
</div>
)
}