Slide to Unlock
A sleek, interactive slider inspired by the classic iPhone OS "slide to unlock" gesture.
Loading...
Installation
pnpm dlx shadcn add @ncdai/slide-to-unlock
Usage
import {
SlideToUnlock,
SlideToUnlockHandle,
SlideToUnlockText,
SlideToUnlockTrack,
} from "@/components/slide-to-unlock";
import { ShimmeringText } from "@/registry/shimmering-text";<SlideToUnlock>
<SlideToUnlockTrack>
<SlideToUnlockText>
<ShimmeringText />
</SlideToUnlockText>
<SlideToUnlockHandle />
</SlideToUnlockTrack>
</SlideToUnlock>API Reference
SlideToUnlock
The root component that provides context for all child components.
| Prop | Type | Default | Description |
|---|---|---|---|
handleWidth | number | 56 | Width of the draggable handle in pixels. |
onUnlock | () => void | Callback function triggered when the handle reaches the end. | |
className | string | Additional CSS classes to apply to the root element. |
SlideToUnlockTrack
The container that holds the text and handle components.
| Prop | Type | Description |
|---|---|---|
className | string | Additional CSS classes to apply to the track element. |
SlideToUnlockText
The text label that fades out as the handle is dragged.
| Prop | Type | Description |
|---|---|---|
children | ReactNode | (props: { isDragging: boolean }) => ReactNode | Text content or render function that receives dragging state. |
className | string | Additional CSS classes to apply to the text element. |
SlideToUnlockHandle
The draggable handle element.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | ArrowRight | Custom icon or content to display inside the handle. |
className | string | Additional CSS classes to apply to the handle element. |
ShimmeringText
An animated text component that creates a shimmering effect by sequentially animating each character's color.
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | The text content to display with the shimmering effect. | |
duration | number | 1 | The duration (in seconds) for each character's shimmer animation cycle. |
isStopped | boolean | false | Controls whether the animation is stopped. When true, characters return to their base color. |
className | string | Additional CSS classes to apply to the root span element. |
Examples
Default
Loading...
Custom Color
Loading...
Custom Handle
Loading...