Capstan
Carousel. A row of slides that scrolls, swipes and steps, with dots, a counter and optional rotation.
- Component
- Carousel
- Pattern
- APG Carousel
- Outputs
- React + Tailwind, HTML/CSS/JS
- Status
- In stock, tested
Test bench
Runs the exported code, not a mock-up.
Capstan · React + TailwindFull width
| Keys | What happens |
|---|---|
| Tab | Move to the slide row, then to the buttons and dots under it. |
| ← → | Scroll the slide row while it has focus. |
| EnterorSpace | Press the focused button: previous, next, a dot, or stop and start. |
Take it home
React + Tailwind CSS v4: install with one command, or copy the file. Your options are already in it.
npx shadcn@latest add "/r/carousel.json"Run it in your project root. It writes components/carousel.tsx with the options you set here. Needs Tailwind CSS v4 and a project set up for the shadcn CLI (npx shadcn@latest init).