Screen Shuffle

Component 1

About

A stack of product screenshots that rotates the front screen to the back, for SaaS and fintech landing page heroes. Part of ssych ui: https://ssych.com/library/screen-shuffle

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Screen Shuffle to your project and fits it to your theme.

Code

How Screen Shuffle is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  )
}