Carousel API

API documentation for Carousel component

Carousel#

Props#

Defines valid properties in Carousel component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: CarouselInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: CarouselInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<CarouselPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: CarouselInstance) => ReactNode)	null	The children to render.
orientation	"horizontal" \| "vertical"	'horizontal'	Orientation of the carousel.
align	"center" \| "start" \| "end"	'start'	Alignment of the carousel items.
loop	boolean	false	Whether the carousel should loop.
spacing	number	16	Spacing between carousel items.
slide	number	0	Index of the active slide.
onSlideChange	(event: useCarouselChangeEvent) => void	null	Callback fired when the carousel's slide changes.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Defines valid state in Carousel component.

name	type	default	description
scrollSnaps	number[]	null	Array of calculated scroll positions (snap points) for each slide.
snapPoints	number[]	null	Array of calculated scroll positions (snap points) for each slide.
isSwiping	boolean	null	Indicates whether the user is currently swiping/dragging the carousel.
slideSizes	number[]	null	Array of sizes (width or height depending on orientation) of each slide.
canLoop	boolean	null	Indicates if looping (circular scroll) is enabled or possible.
snaps	number[]	null	Array of raw snap offsets without adjustments for looping or alignment.
activeIndex	number	null	The index of the currently active slide.
prevDisabled	boolean	null	Whether the "previous" navigation button should be disabled.
nextDisabled	boolean	null	Whether the "next" navigation button should be disabled.

Exposes#

Defines the methods and properties exposed by Carousel component.

name	type	default	description
state	useCarouselState	null	The state of the useCarousel.
carouselRef	RefObject<HTMLDivElement>	null	Ref to the main carousel container DOM element.
addSlideRef	(el: HTMLDivElement) => void	null	Adds a reference to a slide element.
slideTo	(index?: number, offset?: number) => void	null	Scrolls the carousel to a specific slide index.
handlePointerUp	(event: PointerEvent) => void	null	Handles pointer release events.
handlePointerDown	(event: PointerEvent) => void	null	Handles pointer down events.
handlePointerMove	(event: PointerEvent) => void	null	Handles pointer move events.
handlePrev	() => void	null	Handles previous button click events.
handleNext	() => void	null	Handles next button click events.
handleClick	(event: MouseEvent) => void	null	Handles carousel container click events.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of Carousel component.

name	type	default	description
root	CarouselPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of Carousel component.

values
ComponentInstance<CarouselProps, CarouselState, CarouselExposes>

CarouselContent#

Props#

Defines valid properties in CarouselContent component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: CarouselContentInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: CarouselContentInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<CarouselContentPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: CarouselContentInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Exposes#

Defines the methods and properties exposed by CarouselContent component.

name	type	default	description
carousel	CarouselInstance	null	The Carousel component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of CarouselContent component.

name	type	default	description
root	CarouselContentPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of CarouselContent component.

values
ComponentInstance<CarouselContentProps, CarouselContentState, CarouselContentExposes>

CarouselItem#

Props#

Defines valid properties in CarouselItem component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: CarouselItemInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: CarouselItemInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<CarouselItemPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: CarouselItemInstance) => ReactNode)	null	The children to render.
size	number	null
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Exposes#

Defines the methods and properties exposed by CarouselItem component.

name	type	default	description
carousel	CarouselInstance	null	The Carousel component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of CarouselItem component.

name	type	default	description
root	CarouselItemPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of CarouselItem component.

values
ComponentInstance<CarouselItemProps, CarouselItemState, CarouselItemExposes>

CarouselIndicators#

Props#

Defines valid properties in CarouselIndicators component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: CarouselIndicatorsInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: CarouselIndicatorsInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<CarouselIndicatorsPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: CarouselIndicatorsInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Exposes#

Defines the methods and properties exposed by CarouselIndicators component.

name	type	default	description
carousel	CarouselInstance	null	The Carousel component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of CarouselIndicators component.

name	type	default	description
root	CarouselIndicatorsPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of CarouselIndicators component.

values
ComponentInstance<CarouselIndicatorsProps, CarouselIndicatorsState, CarouselIndicatorsExposes>

CarouselIndicator#

Props#

Defines valid properties in CarouselIndicator component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: CarouselIndicatorInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: CarouselIndicatorInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<CarouselIndicatorPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: CarouselIndicatorInstance) => ReactNode)	null	The children to render.
snap	number	null
index	number	null
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Exposes#

Defines the methods and properties exposed by CarouselIndicator component.

name	type	default	description
carousel	CarouselInstance	null	The Carousel component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of CarouselIndicator component.

name	type	default	description
root	CarouselIndicatorPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of CarouselIndicator component.

values
ComponentInstance<CarouselIndicatorProps, CarouselIndicatorState, CarouselIndicatorExposes>

CarouselNext#

Props#

Defines valid properties in CarouselNext component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: CarouselNextInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: CarouselNextInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<CarouselNextPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: CarouselNextInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Exposes#

Defines the methods and properties exposed by CarouselNext component.

name	type	default	description
carousel	CarouselInstance	null	The Carousel component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of CarouselNext component.

name	type	default	description
root	CarouselNextPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of CarouselNext component.

values
ComponentInstance<CarouselNextProps, CarouselNextState, CarouselNextExposes>

CarouselPrev#

Props#

Defines valid properties in CarouselPrev component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: CarouselPrevInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: CarouselPrevInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<CarouselPrevPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: CarouselPrevInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Exposes#

Defines the methods and properties exposed by CarouselPrev component.

name	type	default	description
carousel	CarouselInstance	null	The Carousel component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of CarouselPrev component.

name	type	default	description
root	CarouselPrevPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of CarouselPrev component.

values
ComponentInstance<CarouselPrevProps, CarouselPrevState, CarouselPrevExposes>

useCarousel#

Props#

Defines valid properties in useCarousel.

name	type	default	description
orientation	"horizontal" \| "vertical"	'horizontal'	Orientation of the carousel.
align	"center" \| "start" \| "end"	'start'	Alignment of the carousel items.
loop	boolean	false	Whether the carousel should loop.
spacing	number	16	Spacing between carousel items.
slide	number	0	Index of the active slide.
onSlideChange	(event: useCarouselChangeEvent) => void	null	Callback fired when the carousel's slide changes.

State#

Defines valid state in useCarousel.

name	type	default	description
scrollSnaps	number[]	null	Array of calculated scroll positions (snap points) for each slide.
snapPoints	number[]	null	Array of calculated scroll positions (snap points) for each slide.
isSwiping	boolean	null	Indicates whether the user is currently swiping/dragging the carousel.
slideSizes	number[]	null	Array of sizes (width or height depending on orientation) of each slide.
canLoop	boolean	null	Indicates if looping (circular scroll) is enabled or possible.
snaps	number[]	null	Array of raw snap offsets without adjustments for looping or alignment.
activeIndex	number	null	The index of the currently active slide.
prevDisabled	boolean	null	Whether the "previous" navigation button should be disabled.
nextDisabled	boolean	null	Whether the "next" navigation button should be disabled.

Exposes#

Defines the methods and properties exposed by useCarousel.

name	type	default	description
state	useCarouselState	null	The state of the useCarousel.
carouselRef	RefObject<HTMLDivElement>	null	Ref to the main carousel container DOM element.
addSlideRef	(el: HTMLDivElement) => void	null	Adds a reference to a slide element.
slideTo	(index?: number, offset?: number) => void	null	Scrolls the carousel to a specific slide index.
handlePointerUp	(event: PointerEvent) => void	null	Handles pointer release events.
handlePointerDown	(event: PointerEvent) => void	null	Handles pointer down events.
handlePointerMove	(event: PointerEvent) => void	null	Handles pointer move events.
handlePrev	() => void	null	Handles previous button click events.
handleNext	() => void	null	Handles next button click events.
handleClick	(event: MouseEvent) => void	null	Handles carousel container click events.

Interfaces#

Types#

Instance

Instance of useCarousel headless.

values
HeadlessInstance<useCarouselProps, useCarouselState, useCarouselExposes>