Components
Loading preview...
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.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/sparks-carousel// demo.tsx
import { SparksCarousel, SparkItem } from "@/components/ui/sparks-carousel";
// Sample data for the carousel
const sparksData: SparkItem[] = [
{
id: 1,
imageSrc: "https://images.unsplash.com/photo-1621504450181-5d356f61d307?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Q3J5cHRvfGVufDB8fDB8fHww?q=80&w=280&h=160&fit=crop",
title: "Gen 2: Crypto is here to stay - and it's brought some friends...",
count: 19,
countLabel: "NO. OF SYMBOLS",
},
{
id: 2,
imageSrc: "https://plus.unsplash.com/premium_photo-1661284836545-3a6ec65fcffc?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjF8fHdvcmt8ZW58MHx8MHx8fDA%3D",
title: "Proof of Work: Embracing the crunch",
count: 27,
countLabel: "NO. OF SYMBOLS",
},
{
id: 3,
imageSrc: "https://images.unsplash.com/photo-1696960181433-68ca79ac8149?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fGRlY2lzaW9ufGVufDB8fDB8fHww",
title: "Smart contracts: Make the smart decision",
count: 36,
countLabel: "NO. OF SYMBOLS",
},
{
id: 4,
imageSrc: "https://images.unsplash.com/photo-1695390837115-408e49a2041e?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8c3Rha2V8ZW58MHx8MHx8fDA%3D",
title: "Staking Coins: Pick up a stake",
count: 18,
countLabel: "NO. OF SYMBOLS",
},
{
id: 5,
imageSrc: "https://images.unsplash.com/photo-1639322537228-f710d846310a?q=80&w=280&h=160&fit=crop",
title: "Web3 Infrastructure: The new frontier",
count: 42,
countLabel: "NO. OF SYMBOLS",
},
{
id: 6,
imageSrc: "https://images.unsplash.com/photo-1534951009808-766178b47a4f?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGZpbmFuY2V8ZW58MHx8MHx8fDA%3D",
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;