Modus UI

Kinetic Carousel

Web (React)

A modern, physics-based carousel that supports dragging, infinite looping, and 3D perspective transitions.

A modern, physics-based carousel that supports dragging, infinite looping, and 3D perspective transitions. Excellent for testimonials, feature spotlights, or image galleries.

Live Preview

Fast Setup

Drop into any Next.js project and instantly see results with zero configuration.

Fluid Animations

Physics-based transitions that feel natural and responsive to user input.

Themeable

Automatically adapts to your light and dark mode Tailwind configurations.

Accessible

Built-in keyboard navigation and ARIA attributes for screen readers.

Fast Setup

Drop into any Next.js project and instantly see results with zero configuration.

Fluid Animations

Physics-based transitions that feel natural and responsive to user input.

Installation

CLI

npx @modus-ui/cli add kinetic-carousel

Manual

  1. Copy the code from the component tab.
  2. Create a file at components/ui/kinetic-carousel.tsx.
  3. Paste the code.

Usage

tsx
import { KineticCarousel } from "@/components/ui/kinetic-carousel";

export default function Example() {
  const items = [
    <div key="1" className="flex h-48 items-center justify-center rounded-xl bg-muted p-8">
      Slide 1
    </div>,
    <div key="2" className="flex h-48 items-center justify-center rounded-xl bg-muted p-8">
      Slide 2
    </div>,
    <div key="3" className="flex h-48 items-center justify-center rounded-xl bg-muted p-8">
      Slide 3
    </div>,
  ];

  return <KineticCarousel items={items} loop={true} autoplay={true} />;
}

Props

PropTypeDefaultDescription
itemsReactNode[][]Array of React elements to display as slides.
baseWidthnumber320The total width of the carousel container in pixels.
autoplaybooleanfalseWhether the carousel should automatically cycle.
autoplayDelaynumber3000The delay in milliseconds between automatic slide transitions.
pauseOnHoverbooleanfalseWhether to pause autoplay when the user hovers over the carousel.
loopbooleanfalseWhether the carousel should infinitely loop from the last slide back to the first.

Comments

  • No comments yet.