Beta modeInstall commands on this page use lovdacn@beta, which installs from the beta registry and may change before the stable release.What’s in beta

Carousel

A horizontal scrollable image or card slider with previous and next controls.

Loading preview…

Carousel is in beta. This component was recently added and will be stabled soon.

Installation

npx lovdacn@latest add carousel

(You can also use the shortened lvcn alias, e.g., npx lvcn@latest add carousel)

Registry dependencies: semantic-icon, icon, primitives, utils

Usage

import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"
import { Text, View } from "react-native"

export function Example() {
  const data = ["Slide 1", "Slide 2", "Slide 3"];

  return (
    <Carousel>
      <CarouselContent
        data={data}
        renderItem={({ item }) => (
          <CarouselItem className="h-40 bg-muted">
            <Text>{item}</Text>
          </CarouselItem>
        )}
      />
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  )
}