Carousel Navigator

Renders a carousel navigator with theme-adaptive background transitions and progress-syncing indicators. It shows navigation buttons and dots that change based on the current slide. It updates the background and indicators dynamically as the slide changes. Use it for interactive, theme-aware carousels.

byWatermelon Corp from Watermelon

Installation

terminal

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

npx layro-cli add @watermeloncorp/carousel-navigator

npx layro-cli add @watermeloncorp/carousel-navigator

bunx layro-cli add @watermeloncorp/carousel-navigator

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

Code

Demo

'use client';

import { motion } from 'motion/react';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { type FC } from 'react';

type ThemeConfig = {
  bg: string;
  button: string;
  dot: string;
  progress: string;
};

interface CarouselNavigatorProps {