Scroll Cards

Galleries 985

About

A smooth gallery where cards stack on scroll, each showing an image, title, and description.

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

Code

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

Usage.tsx

import {CardsParallax, type iCardItem} from "@/components/ui/scroll-cards";


const cardItems: iCardItem[] = [
	{
		title: "Everest Camp",
		description: "Experience the ultimate trek to the world's highest mountain",
		tag: "trekking",
		src: "https://cdn.21st.dev/assets/mirror/05/05368fb8d22fcb8abc3f9c0843ef1d31c7e30fc0771f1018bda42c7972d08d48.jpg",
		link: "#",
		color: "white",
		textColor: "white",
	},
	{
		title: "Annapurna",
		description: "Journey through the stunning landscapes of Nepal",
		src: "https://cdn.21st.dev/assets/mirror/5c/5caece9d06d43b4ccbbb9664d46ddfcddc56de6fa604cc8f120251416378fc66.jpg",
		tag: "hiking",
		link: "#",
		color: "green",
		textColor: "white",
	},
	{
		title: "Inca Trail",
		description: "Ancient paths leading to Machu Picchu",
		src: "https://cdn.21st.dev/assets/mirror/1c/1ccf77005133704782622927f27869facf75034d3b07c187bc115a2b6617da2f.jpg",
		tag: "adventure",
		link: "#",
		color: "white",
		textColor: "black",
	},
	{
		title: "Swiss Alps",
		description: "Discover the breathtaking beauty of European mountains",
		src: "https://cdn.21st.dev/assets/mirror/9a/9a810b81f107aed0d8f38fa9432a5d2a77f326cf44530d1d0b15d10660f702b4.jpg",
		tag: "mountains",
		link: "#",
		color: "white",
		textColor: "white",
	},
];

const DemoOne = () => {
  return (

			<CardsParallax items={cardItems} />
   
  );
};

export { DemoOne };