XiodUI
HomeDocs
OverviewComponentsStyling & CustomizationChangelog

Components

  • Accordion
  • Agent Steps
  • Alert
  • Alert Dialog
  • Aspect Ratio
  • Autocomplete
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Button Split
  • Calendar
  • Card
  • Carousel
  • Checkbox
  • Circular Progress
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Context Menu
  • Copy To Clipboard
  • Corner Badge
  • Dashboard Grid
  • Date Picker
  • Dialog
  • Dot Matrix
  • Draggable
    Updated
  • Drawer
  • Empty
  • Field
  • Fieldset
  • File Upload
    Updated
  • Form
  • Frame
  • Gauge
  • Grid
  • Group
  • Input
  • Input Group
  • Input OTP
  • Input Payment
  • Input Phone
    Updated
  • Input Sensitive
  • Kbd
  • Kinetic Click
  • Label
  • List Box
    Updated
  • Loader
  • Marker
  • Menu
  • Menubar
  • Message
  • Meter
  • Morphic Toast
  • Navigation Menu
  • Number Field
  • Option Picker
  • Orb
  • Pagination
  • Popover
  • Preview Card
    Updated
  • Progress
  • Radio
  • Resizable
  • Ruler Picker
  • Scroll Area
  • Scroll Bar
  • Select
  • Separator
  • Sidebar
  • Skeleton
  • Slider
  • Sortable
  • Switch
  • Table
  • Tabs
  • Text
  • Textarea
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Toolbar
  • Tooltip
  • Waveform
  • Wheel Picker

Loading...

Preview Skeleton

Installation Skeleton

Usage Skeleton

API Reference Skeleton

Sponsors

Support the development of XiodUI and help us build the best component library on Earth.

+++
Sponsor on GitHub

Carousel

Previous: CardNext: Checkbox

A horizontal or vertical slideshow that scrolls with snapping, drag, arrow buttons and the keyboard.

Preview

Loading Preview...

Installation

bun add xiod-ui

Usage

Imports

1import {2  Carousel,3  CarouselContent,4  CarouselItem,5  CarouselPrevious,6  CarouselNext,7  CarouselPlayPause,8  CarouselDots9} from "xiod-ui/carousel";

Anatomy

1<Carousel>2  <CarouselContent>3    <CarouselItem />4  </CarouselContent>5  <CarouselPrevious />6  <CarouselNext />7</Carousel>

API Reference

Detailed documentation of properties and options.

Carousel

Accepts render, plus every native <div> attribute.

PropTypeDefaultDescription
autoplay
boolean
false

Whether the carousel advances on its own. It pauses while hovered or focused, while the tab is hidden, and when the user prefers reduced motion. Add CarouselPlayPause to let users stop it.

autoplayInterval
number
5000

The time between slides when autoplay is on, in milliseconds.

CarouselContent

Accepts render, plus every native <div> attribute.

CarouselItem

Accepts render, plus every native <div> attribute.

CarouselPrevious

Accepts render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
icon
ReactNode
–

Replaces this icon. Accepts any node; null renders no icon. Takes precedence over IconProvider.

size
"lg"|"sm"

CarouselNext

Accepts render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
icon
ReactNode
–

Replaces this icon. Accepts any node; null renders no icon. Takes precedence over IconProvider.

size
"lg"|"sm"

CarouselPlayPause

Accepts render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
pauseIcon
ReactNode
–

Replaces the pause icon. Accepts any node; null renders no icon. Takes precedence over IconProvider.

playIcon
ReactNode
–

CarouselDots

Accepts render, plus every native <div> attribute.

CardCheckbox
defaultIndex
number
–

The slide selected at first, when index isn't controlled.

index
number
–

The selected slide's index. Use with onIndexChange to control it.

labels
Partial<CarouselLabels>
–

Replaces the built-in text of this carousel and its parts. Takes precedence over LabelsProvider.

loop
boolean
true

Whether going past the last slide returns to the first, and back from the first to the last.

onIndexChange
((index: number) => void)
–

Called with the new index whenever the selected slide changes.

opts
CarouselOptions
–

Options for the scrolling behaviour, such as align, dragFree or duration. loop set here takes precedence over the loop prop.

orientation
"horizontal"|"vertical"
horizontal

Whether the items are laid out horizontally or vertically.

plugins
CarouselPlugin[]
–

Plugins to run with the carousel. Each plugin's init receives the carousel API once it is ready, and its destroy runs when it's removed.

setApi
((api: CarouselApi) => void)
–

Called with the carousel API once it's ready.

|"default"
|"xl"
|"xs"
|"icon"
|"icon-lg"
|"icon-sm"
|"icon-xl"
|"icon-xs"
icon-sm

The size of the component.

variant
"link"|"default"|"destructive"|"outline"|"secondary"|"destructive-outline"|"ghost"
outline

The visual style of the component.

|"default"
|"xl"
|"xs"
|"icon"
|"icon-lg"
|"icon-sm"
|"icon-xl"
|"icon-xs"
icon-sm

The size of the component.

variant
"link"|"default"|"destructive"|"outline"|"secondary"|"destructive-outline"|"ghost"
outline

The visual style of the component.

Replaces the play icon. Accepts any node; null renders no icon. Takes precedence over IconProvider.

size
"lg"|"sm"|"default"|"xl"|"xs"|"icon"|"icon-lg"|"icon-sm"|"icon-xl"|"icon-xs"
icon-sm

The size of the component.

variant
"link"|"default"|"destructive"|"outline"|"secondary"|"destructive-outline"|"ghost"
outline

The visual style of the component.