Sparks Carousel

Cards 129

About

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.

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

Code

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

Usage.tsx

// 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;