║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Loading Carousel description: An animated carousel component with loading indicators and customizable display options. component: true

<ComponentPreview name="loading-carousel-demo" className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]" />

Installation

<CodeTabs> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

npx shadcn@latest add https://cult-ui.com/r/loading-carousel.json

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Install the required dependencies:</Step>

npm install embla-carousel-autoplay framer-motion lucide-react

<Step>Install the carousel component:</Step>

npx shadcn@latest add carousel

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="loading-carousel" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </CodeTabs>

Usage

export default function LoadingCarouselDemo() {
  return <LoadingCarousel />
}

Props

| Prop | Type | Default | Description | | ------------------ | ------------------------------- | ------------- | ---------------------------------------- | | tips | Tip[] | defaultTips | Array of tips to display in the carousel | | autoplayInterval | number | 4000 | Time in milliseconds between slides | | showNavigation | boolean | false | Show previous/next navigation buttons | | showIndicators | boolean | true | Show slide indicator dots | | showProgress | boolean | true | Show progress bar for current slide | | aspectRatio | "video" \| "square" \| "wide" | "video" | Aspect ratio of the carousel | | textPosition | "top" \| "bottom" | "bottom" | Position of the tip text | | onTipChange | (index: number) => void | - | Callback function when tip changes | | backgroundTips | boolean | false | Show tips on the image background | | backgroundGradient | boolean | false | Show gradient overlay on background | | shuffleTips | boolean | false | Randomly shuffle the order of tips |

Examples

Default

<LoadingCarousel />

Custom Interval and Navigation

<LoadingCarousel autoplayInterval={2000} showNavigation={true} />

Square Aspect Ratio with Background Tips

<LoadingCarousel
  aspectRatio="square"
  backgroundTips={true}
  backgroundGradient={true}
/>

Wide Aspect Ratio with Top Text

<LoadingCarousel aspectRatio="wide" textPosition="top" showIndicators={false} />

Shuffled Tips

<LoadingCarousel
  shuffleTips={true}
  autoplayInterval={3000}
  showProgress={false}
/>

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║