## Installation ```bash npx shadcn@latest add "https://ratneshc.com/r/perspective-tilt.json" ``` 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 { PerspectiveTilt, PerspectiveTiltTrigger, PerspectiveTiltContent, } from "@/components/perspective-tilt"; ``` ```tsx Open {/* Your content here */} ``` ## Composition Use the following composition to build a `PerspectiveTilt`: ```text PerspectiveTilt ├── PerspectiveTiltTrigger └── PerspectiveTiltContent ``` ## API Reference ### PerspectiveTilt The root component that manages the open/close state. | Prop | Type | Default | Description | | :------------- | :------------------------ | :------ | :------------------------------------------------ | | `open` | `boolean` | - | The controlled open state of the dialog. | | `onOpenChange` | `(open: boolean) => void` | - | Event handler called when the open state changes. | | `children` | `ReactNode` | - | The components to be wrapped by the context. | ### PerspectiveTiltTrigger The component that toggles the open state. | Prop | Type | Default | Description | | :---------- | :---------- | :------ | :---------------------------------------------------- | | `asChild` | `boolean` | `false` | When true, merges its props onto its immediate child. | | `className` | `string` | - | Custom styling for the trigger element. | | `children` | `ReactNode` | - | The element that triggers the dialog on click. | ### PerspectiveTiltContent The component that renders the animated card content. | Prop | Type | Default | Description | | :---------- | :---------- | :------ | :------------------------------------------ | | `className` | `string` | - | Custom styling for the modal content card. | | `children` | `ReactNode` | - | The content to be rendered within the card. |

The hidden mechanics of smooth component unmounting

The story behind draftlogo