Getting Started

Introduction

Layout Components

Expandable Panel

Gallery & Media

Image Gallery Scrolling Gallery Liquid Image Reveal

Card Components

Mouse Tilt Card Post Swiper New Swipeable Cards Instagram Card New Twitter Card New Facebook Card New

Interactive Elements

Mouse Trail Context Menu

Text & Animation

Text Loader Text Scramble Reveal

Post Swiper

A unified swipeable component for social media cards. Effortlessly create card stacks with Twitter, Instagram, Facebook posts, or any custom content with smooth swipe gestures.

React

Swiper

Cards

Social Media

Touch

Animation

DiMaac@DiMaacUI·1h

Just shipped PostSwiper! 🚀 A unified component for swipeable social media cards. Mix Twitter and Facebook posts seamlessly. #DiMaacUI #React

Baraka - Muscle Therapist3h

Fitness tip of the day: Your posture while coding matters! Keep your back straight, shoulders relaxed, and take breaks every hour. A healthy body supports a sharp mind. 💪💻

Lylia@lylia_agent47·5h

🌙

3:06 AM

when the world sleeps,

creativity awakens

trust the process

DiMaac•6h

🚀

Ship It

ideas mean nothing,

execution is everything

just build it

DiMaac8h

The secret to becoming a better developer? Build things. Lots of things. Don't just follow tutorials—create your own projects, make mistakes, debug, learn, and repeat. Your portfolio isn't about perfection. It's about progress. 📈

Baraka@muscle_therapist·12h

Your body is a temple. Your code is a cathedral. Both need: ✓ Strong foundations ✓ Regular maintenance ✓ Attention to detail Don't skip leg day. Don't skip code reviews. 🏋️‍♂️💻

Lylia1d

🔥

Keep Going

when it gets hard,

that's when it matters

never give up

Using CLI

npx dimaac add PostSwiper

Manual Installation

npm install react swiper

lib/utils.ts

import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

components/ui/PostSwiper.tsx

"use client";

import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { EffectCards } from "swiper/modules";
import "swiper/css/effect-cards";
import "swiper/css";
import { cn } from "@/lib/utils";

interface PostSwiperProps {
  slides: React.ReactNode[];
  className?: string;
  swiperClassName?: string;
  loop?: boolean;
  grabCursor?: boolean;
}

const PostSwiper = ({
  slides,
  className,
  swiperClassName,
  loop = true,
  grabCursor = true,
}: PostSwiperProps) => {
  return (
    <div className={cn("w-full flex flex-col items-center justify-center min-h-[600px]", className)}>
      <Swiper
        effect="cards"
        grabCursor={grabCursor}
        loop={loop}
        className={cn("w-full max-w-xl h-auto", swiperClassName)}
        modules={[EffectCards]}
        cardsEffect={{
          slideShadows: false,
        }}
      >
        {slides.map((slide, index) => (
          <SwiperSlide key={index} className="!flex !items-start !justify-center bg-transparent">
            {slide}
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
};

export default PostSwiper;