## Installation ```bash npx shadcn add @ncdai/slide-to-unlock ``` Install the following dependencies ```bash npm install motion clsx tailwind-merge ``` Add a cn helper Copy and paste the following code into your project Update the import paths to match your project setup ## Usage ```tsx import { SlideToUnlock, SlideToUnlockHandle, SlideToUnlockText, SlideToUnlockTrack, } from "@/components/slide-to-unlock"; import { ShimmeringText } from "@/registry/shimmering-text"; ``` ```tsx ``` ## 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. |

Projects

Zoto Finance

Zoto Now