All components
Card Hover
CardsA card that springs up and scales slightly on hover.
Draft Engine
Collaborative MDX editing with offline sync.
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/card-hover.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge2. Copy the component source into
components/library/card-hover.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Card contents. |
| className | string | - | Classes applied to the card. |
Accessibility
- Hover-only motion, so keyboard and reading order are untouched.
- The shadow change reinforces the lift for anyone who cannot perceive it.
- Wrap interactive contents in a real control; the card itself is not one.
Dependencies
motionclsxtailwind-merge