Interactive slider inspired by the classic iPhone “slide to unlock” gesture.
“
awesome. Love the components, especially slide-to-unlock. Great job
”Guillermo Rauch, CEO @Vercel
Features
- Smooth drag interaction with spring physics via Motion.
- Composable compound components (track, handle, text).
- Customizable handle and colors.
- Built-in shimmering text effect.
Want to build animations like Slide to Unlock? I highly recommend Emil Kowalski’s animations.dev course. Take the course
Installation
$ pnpm dlx shadcn@latest add @ncdai/slide-to-unlock
Usage
import {
SlideToUnlock,
SlideToUnlockHandle,
SlideToUnlockText,
SlideToUnlockTrack,
} from "@/components/slide-to-unlock"
import { ShimmeringText } from "@/components/shimmering-text"<SlideToUnlock>
<SlideToUnlockTrack>
<SlideToUnlockText>
<ShimmeringText />
</SlideToUnlockText>
<SlideToUnlockHandle />
</SlideToUnlockTrack>
</SlideToUnlock>Composition
Use the following composition to build a SlideToUnlock
SlideToUnlock
└── SlideToUnlockTrack
├── SlideToUnlockText
│ └── ShimmeringText
└── SlideToUnlockHandleAPI Reference
SlideToUnlock
Prop
Type
SlideToUnlockText
Prop
Type