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 @syedmoin/slide-to-unlock
Usage
import { ShimmeringText } from "@/components/shimmering-text"
import {
SlideToUnlock,
SlideToUnlockHandle,
SlideToUnlockText,
SlideToUnlockTrack,
} from "@/components/slide-to-unlock"<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