Carousel
Horizontal slide carousel with autoplay, dot navigation, and swipe indicators.
Release notes
Design system updates
See the latest tokens and components ready for production.
Customer story
Studio spotlight
Highlight creative teams and the work they are shipping.
Marketing
Campaign previews
Line up hero visuals and messaging before launch day.
Dependencies
- clsx
- tailwind-merge
Files
- components/ui/carousel.tsx
Installation
Using shadcn CLI
npx shadcn add carousel --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-mergeRelated Media Components
Aspect Ratio Box
Container that maintains a specified aspect ratio with common presets for video, photo, and square.
Audio Player
UI only audio player with play/pause, progress, volume control, and time display.
Carousel Fade
Image carousel with smooth fade transitions, autoplay, keyboard navigation, and dot indicators.
Device Frame
Screenshot mockup frames for phone, tablet, laptop, and browser.
Drag to Scroll Gallery
A horizontal gallery with drag to scroll momentum and springy cards.
Image Comparison
Before and after image comparison with a draggable slider handle.