All components
Carousel
NavigationA slide carousel with arrows and dot indicators.
Ship faster
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/carousel.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge lucide-react2. Copy the component source into
components/library/carousel.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| slides | ReactNode[] | - | Slides to cycle through. |
| className | string | - | Classes applied to the frame. |
Accessibility
- Arrows and dots are real buttons with aria-labels naming their target.
- Slide direction drives the enter and exit transforms, so motion reads correctly.
- Wraps at both ends, so the control never dead-ends.
Dependencies
motionclsxtailwind-mergelucide-react