The Carousel component shows a horizontal, draggable row of cards or repeated content. Use it when users need to browse related items in limited space, such as previews, products, media, recommendations, or onboarding panels.
Use it for:
- Horizontal item browsing: Show peer items that can be dragged or scrolled.
- Card and media strips: Present previews, products, recommendations, or compact panels.
- Carousel controls: Add previous and next buttons inside or outside the carousel.
- Active index tracking: React when the centered or active card changes.
Do not use Carousel for page section switching, numeric values, fullscreen galleries, vertical lists, tables, grids, or step-by-step workflows.