The Carousel component can be used to display a set of items in a horizontally scrolling container. This is particularly useful for longer tabs, or similar content that should not take up too much vertical space on mobile.
The carousel is used under the hood in the TabBar
component, so you can also see it in action in input patterns.
import { Carousel, CarouselItem } from "@ds-kit/carousel"
For this simple example we will render a carousel with items of the same width.
Item 1Item 2Item 3Item 4<Carousel variant="full"> <CarouselItem> <Div width="100%" bg="#EEE" p="1rem"> Item 1 </Div> </CarouselItem> <CarouselItem> <Div width="100%" bg="#EEE" p="1rem"> Item 2 </Div> </CarouselItem> <CarouselItem> <Div width="100%" bg="#EEE" p="1rem"> Item 3 </Div> </CarouselItem> <CarouselItem> <Div width="100%" bg="#EEE" p="1rem"> Item 4 </Div> </CarouselItem> </Carousel>
A carousel with variable width items.
Variable widthsSmallLonger components are possible tooThis will only scroll when it's longer than the container<Carousel variant="full"> <CarouselItem width="auto"> <Div bg="#EEE" p="1rem"> Variable widths </Div> </CarouselItem> <CarouselItem width="auto"> <Div bg="#EEE" p="1rem"> Small </Div> </CarouselItem> <CarouselItem width="auto"> <Div bg="#EEE" p="1rem"> Longer components are possible too </Div> </CarouselItem> <CarouselItem width="auto"> <Div bg="#EEE" p="1rem"> This will only scroll when it's longer than the container </Div> </CarouselItem> </Carousel>
width
string
number
array
maxWidth
string
variant
"narrow"
"default"
"full"
maxWidth
string
children
arrayOf
node
fade
bool
fadeColor
string