127 Components
Carousel with Dots
CardsHorizontally snapping card carousel with swipe gesture physics, a pill-shaped morphing dot indicator, keyboard arrow support, and circular navigation buttons.
ProMotion 120Hz120 FPS
Adaptive refresh rates that match your gesture velocity.
Every swipe and drag calculates release velocity to settle naturally without abrupt stops.
Spatial Audio Engine48 kHz
Studio-grade acoustic isolation in a minimal enclosure.
Precision-milled internals reduce harmonic distortion across the entire frequency spectrum.
All-Day Efficiency22 HRS
Up to 22 hours of continuous workflow on a single charge.
Fast-charge architecture restores 50% capacity in just 25 minutes over USB-C.
Hardware Enclave256-BIT
End-to-end encryption verified at silicon startup.
Dedicated cryptographic keys remain isolated from the main application processor.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/carousel-with-dots.json"
Props
TypeScript props supported by <CarouselWithDots />.
| Prop | Type | Default | Description |
|---|---|---|---|
| slides | CarouselSlide[] | — | Array of slide items ({ id, eyebrow, title, description, stat }). |
| defaultIndex | number | 0 | Initial active slide index (0-based). |
| autoPlay | boolean | false | Automatically advances slides on a timer when true. |
| interval | number | 4500 | Auto-play rotation interval in milliseconds. |
| onSlideChange | (index: number) => void | — | Callback fired whenever the active slide changes. |
| className | string | — | Additional Tailwind CSS classes for the carousel root. |
Key Features
- Horizontal drag and swipe gestures with velocity-sensitive slide snapping.
- Pill-shaped frosted page indicator where the active dot smoothly expands into a capsule.
- Circular previous/next arrow controls plus optional autoPlay timer.
Keyboard & Accessibility
- Uses `role='region'` and `aria-roledescription='carousel'` with numbered slide labels.
- Supports `ArrowLeft` and `ArrowRight` keyboard navigation when focused.
- Respects `prefers-reduced-motion` for instant slide changes.