Sparks Carousel A responsive carousel component designed to display a collection of curated cards. It features smooth scrolling animations powered by Framer Motion and is fully themeable using shadcn/ui CSS variables.
// demo.tsx
import { SparksCarousel, SparkItem } from "@/components/ui/sparks-carousel";
// Sample data for the carousel
const sparksData: SparkItem[] = [
{
id: 1,
imageSrc: "https://cdn.21st.dev/assets/mirror/72/720032d286935c3cfa333420fb12a1e24bb1543e5ae728f7046495c8053a001b.jpg",
title: "Gen 2: Crypto is here to stay - and it's brought some friends...",
count: 19,
countLabel: "NO. OF SYMBOLS",
},
{
id: 2,
imageSrc: "https://cdn.21st.dev/assets/mirror/26/26f40c47004479aabc4a9b08021ad566ea3d03149d0acea9701755cd7b99e673.jpg",
title: "Proof of Work: Embracing the crunch",
count: 27,
countLabel: "NO. OF SYMBOLS",
},
{
id: 3,
imageSrc: "https://cdn.21st.dev/assets/mirror/1b/1b6babb892b83d72b43e1052efa8273b630999e2ab67fcfb71538bcf7b309e0b.jpg",
title: "Smart contracts: Make the smart decision",
count: 36,
countLabel: "NO. OF SYMBOLS",
},
{
id: 4,
imageSrc: "https://cdn.21st.dev/assets/mirror/90/90c7923289b3d5e2d659db0547223fb2f7e650fdda49821c99907ccca28e47f7.jpg",
title: "Staking Coins: Pick up a stake",
count: 18,
countLabel: "NO. OF SYMBOLS",
},
{
id: 5,
imageSrc: "https://cdn.21st.dev/assets/mirror/55/55ccc46a5dd61e5ce0bd4f78e6f58f06ccdd4fa662f5e02c3ca18a6e69b31b23.jpg",
title: "Web3 Infrastructure: The new frontier",
count: 42,
countLabel: "NO. OF SYMBOLS",
},
{
id: 6,
imageSrc: "https://cdn.21st.dev/assets/mirror/74/7486b28c4e3402b32f9ce89e7b4b306cb0328d280a2f5894598c3a2b49b2c3ec.jpg",
title: "Decentralized Finance (DeFi): Beyond the banks",
count: 55,
countLabel: "NO. OF SYMBOLS",
},
];
const SparksCarouselDemo = () => {
return (
<div className="w-full bg-background">
<SparksCarousel
title="Sparks"
subtitle="Curated watchlists where ETHUSD is featured."
items={sparksData}
/>
</div>
);
};
export default SparksCarouselDemo;