Carouselshadcn
A row of items to step through.
Data display- Install
- npx shadcn add carousel
- Import from
- @/components/ui/carousel
- Guidance
- draft · v0.1.0
Examples
As installed from shadcn – rendering in jsp-ds tokens through the bridge.
Into Games
Picsl
Review Hub
Finance tool
Guidance
When to use
- A row of like items people browse – case studies, screenshots – when space is short.
When not to use
- For anything people must see: most never move past the first slide. Use a grid.
- Autoplaying. Don't.
Rules
- Label the carousel (
aria-label) and keep Previous and Next visible. - Show part of the next item so it's clear there's more.
Install
Terminal
npx shadcn add carouselImport
import { Carousel } from "@/components/ui/carousel"From shadcn’s own registry. Don’t edit the installed file – jsp-ds styles it through the bridge, and fixes go in styles/overrides.css with an issue.