Carousel

The Carousel component provides a flexible UI element for displaying a carousel of items. It is composed of several subcomponents such as CarouselContent, CarouselItem, CarouselPrevious, and CarouselNext to offer a structured and customizable interface.

Usage

import { Carousel } from '@harnessio/ui/components'

return (
  <Carousel.Root>
    <Carousel.Previous />
    <Carousel.Content>
      <Carousel.Item>
        <div className="h-64 w-full bg-blue-800 text-white flex items-center justify-center">Slide 1</div>
      </Carousel.Item>
      <Carousel.Item>
        <div className="h-64 w-full bg-green-800 text-white flex items-center justify-center">Slide 2</div>
      </Carousel.Item>
      <Carousel.Item>
        <div className="h-64 w-full bg-red-800 text-white flex items-center justify-center">Slide 3</div>
      </Carousel.Item>
    </Carousel.Content>
    <Carousel.Next />
  </Carousel.Root>
)

Anatomy

All parts of the Carousel component can be imported and composed as required.

<Carousel.Root>
  <Carousel.Previous />
  <Carousel.Content>
    <Carousel.Item>
      <div className="h-64 w-full bg-blue-800 text-white flex items-center justify-center">Slide 1</div>
    </Carousel.Item>
    <Carousel.Item>
      <div className="h-64 w-full bg-green-800 text-white flex items-center justify-center">Slide 2</div>
    </Carousel.Item>
    <Carousel.Item>
      <div className="h-64 w-full bg-red-800 text-white flex items-center justify-center">Slide 3</div>
    </Carousel.Item>
  </Carousel.Content>
  <Carousel.Next />
</Carousel.Root>

API Reference

Root

The Root component serves as the main container for all carousel elements.

Prop	Required	Default	Type
children	true		ReactNode
opts	false		CarouselOptions
plugins	false		CarouselPlugin
orientation	false	'horizontal'	'horizontal' | 'vertical'
setApi	false		(api: CarouselApi) => void
initialSlide	false		number
className	false		string

Content

The Content component defines the main content area of the carousel.

<Carousel.Content>
  <Carousel.Item>
    <div className="h-64 w-full bg-blue-800 text-white flex items-center justify-center">Slide 1</div>
  </Carousel.Item>
  <Carousel.Item>
    <div className="h-64 w-full bg-green-800 text-white flex items-center justify-center">Slide 2</div>
  </Carousel.Item>
  <Carousel.Item>
    <div className="h-64 w-full bg-red-800 text-white flex items-center justify-center">Slide 3</div>
  </Carousel.Item>
</Carousel.Content>

Prop	Required	Default	Type
children	true		ReactNode
className	false		string
carouselBlockClassName	false		string

Item

The Item component defines an individual item within the carousel.

<Carousel.Item>
  <div className="h-64 w-full bg-blue-800 text-white flex items-center justify-center">Slide 1</div>
</Carousel.Item>

Prop	Required	Default	Type
children	true		ReactNode
className	false		string

Previous

The Previous component is used to navigate to the previous slide.

<Carousel.Previous />

Prop	Required	Default	Type
className	false		string
variant	false	'outline'	string
size	false	'icon'	string

Next

The Next component is used to navigate to the next slide.

<Carousel.Next />

Prop	Required	Default	Type
className	false		string
variant	false	'outline'	string
size	false	'icon'	string