Docs
Hover Card
Hover Card
Displays a beautiful Hover Card with floating.
Installation
Install the following dependencies:
npm install framer-motionCopy and paste the Event Calendar code into your project.
API Reference
Props
| Prop | Type | Description |
|---|---|---|
className | string | Optional custom class for the HoverCard component. |
children | React.ReactNode | Optional content to be displayed inside the HoverCard. |
buttonText | string | Optional text to display on the HoverCard. |
arrowColor | string | Optional custom color for the arrowColor on the HoverCard. |
buttonColor | string | Optional custom color for the HoverCard, supports any valid CSS color value. |
Usage
export default function Demo() {
return (
<div className="bg-gray-100 p-8">
<div className="mx-auto max-w-2xl space-y-8">
{/* Default Style */}
<HoverCard className="aspect-square" />
</div>
</div>
)
}