Minimal Carousel

A carousel with interactive cards that expand on click, showing details and options. It uses animations for smooth transitions and has a clean, modern design. Use it for displaying wallet or data cards in a dynamic way.

byWatermelon Corp from Watermelon

Installation

terminal

pnpm dlx layro-cli add @watermeloncorp/minimal-carousel

npx layro-cli add @watermeloncorp/minimal-carousel

npx layro-cli add @watermeloncorp/minimal-carousel

bunx layro-cli add @watermeloncorp/minimal-carousel

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import React, { useState } from "react";
import { motion, AnimatePresence } from "motion/react";
import { MoreHorizontal, Copy } from "lucide-react";

/* --- Types --- */
export interface CarouselCard {
  id: string;
  title: string;
  value: string;
  color: string;
  icon: React.ElementType;
}