ComponentsScrollable Card Stack

Scrollable Card Stack

A vertical carousel component with 3D perspective effects that displays cards in a stacked layout. Features smooth scrolling animations, touch support, and configurable 3D transformations including scale, rotation, and opacity changes.

Edu Calvo@educalvolpz

Code

Install with shadcn Beta

Terminal

npx shadcn@latest add "https://smoothui.dev/r/scrollable-card-stack.json"

Or install the demo

Terminal

npx shadcn@latest add "https://smoothui.dev/r/scrollable-card-stack-demo.json"

How to use

Demo.tsx

"use client"

import ScrollableCardStack from "../ui/ScrollableCardStack"

export default function ScrollableCardStackDemo() {
  const cardData = [
    {
      id: "siriorb",
      name: "Edu Calvo",
      handle: "@educalvolpz",
      avatar: "https://github.com/educlopez.png",
      video: "/videos/siriorb.mp4",
      href: "https://x.com/educalvolpz",
    },
    {
      id: "richpopover",
      name: "Edu Calvo",
      handle: "@educalvolpz",
      avatar: "https://github.com/educlopez.png",
      video: "/videos/richpopover.mp4",
      href: "https://x.com/educalvolpz",
    },
    {
      id: "sparkbites",
      name: "Edu Calvo",
      handle: "@educalvolpz",
      avatar: "https://github.com/educlopez.png",
      video: "/videos/sparkbites.mp4",
      href: "https://x.com/educalvolpz",
    },
    {
      id: "svgl",
      name: "Pheralb",
      handle: "@pheralb",
      avatar: "https://github.com/pheralb.png",
      video: "/videos/svgl.mp4",
      href: "https://x.com/pheralb",
    },
  ]

  return (
    <div className="mx-auto w-full max-w-md">
      <ScrollableCardStack
        items={cardData}
        cardHeight={384}
        perspective={1000}
        transitionDuration={180}
        className="mx-auto"
      />
    </div>
  )
}

Props

Prop	Type	Default
items	React.ReactNode[]	-
cardHeight?	number	-
perspective?	number	-
transitionDuration?	number	-
className?	string	-

Rich Popover

A rich popover component that supports icon, title, description, meta text, and an action button/link. Built with Radix UI Popover for excellent accessibility and works seamlessly on both desktop and mobile with click interactions.