ShadcnSwiper

Cards

About

The GlassSwiper component is a sleek, interactive card slider built with modern motion and glassmorphism aesthetics. It allows users to swipe through stacked cards smoothly, mimicking a natural drag-and-release interaction. Each card elegantly blurs into the background with frosted glass effects and layered depth using 3D perspective transforms. The design integrates shadcn/ui styling principles for consistency with modern UI systems, offering both light and dark theme support. Ideal for showcasing portfolios, testimonials, or featured projects, this component combines immersive visuals with smooth transitions, creating a premium and dynamic user experience.

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

Code

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

Usage.tsx

import { ShadcnSwiper } from "@/components/ui/shadcn-swiper";

export default function ShadcnSwiperPage() {
  const cards = [
    {
      id: 1,
      imageUrl: 'https://cdn.21st.dev/assets/mirror/36/36a8d24e124bdd3454096f8989cec254ea059a92b59b7db28f8e36604f8a13d0.jpg',
      title: 'Twilight Shores',
      description: 'Experience calm evenings under pastel skies.',
    },
    {
      id: 2,
      imageUrl: 'https://cdn.21st.dev/assets/mirror/7c/7c4e0ed5640be3124bf195652c55f8a747d683316b336c1cc3a5d1e74635d3f0.jpg',
      title: 'Whispering Pines',
      description: 'Nature’s rhythm, pure and serene.',
    },
    {
      id: 3,
      imageUrl: 'https://cdn.21st.dev/assets/mirror/b9/b9a9d6571aeb3f8c16783b3ec6d0fab067c8705a10b1f7d7d2240999b68be271.jpg',
      title: 'Aurora Nights',
      description: 'Lights that paint the heavens in motion.',
    },
    {
      id: 4,
      imageUrl: 'https://cdn.21st.dev/assets/mirror/88/88f0fbeba1a0dc590cb4fb233aba92f2212bd17d1396dcca5e38520c0bf5e9e2.jpg',
      title: 'Echo Valley',
      description: 'Where silence and echoes meet endlessly.',
    },
  ]

  return (
    <div className="min-h-screen w-full flex flex-col items-center justify-center bg-gradient-to-b from-background to-muted dark:from-black dark:to-slate-900 transition-colors">
      <p className="mb-10 text-muted-foreground text-center max-w-md">
        Swipe through immersive landscapes crafted with elegance and motion.
      </p>
      <ShadcnSwiper cards={cards} />
    </div>
  )
}