CardsProNew
Shift Card
On hover the image flies from the center to a corner and an action panel slides up from below. A neat way to show a preview with share buttons.
Customize
accentColor
glowColor
borderColor
Based on Shift Card (MIT license) · Terms of use
Props
8 properties| Property | Type | Default | Description |
|---|---|---|---|
| topContent | ReactNode | — | Card header, always visible. |
| topAnimateContent | ReactNode | — | What appears in the header on hover. Give the image the same layoutId as in middleContent. |
| middleContent | ReactNode | — | Center content, visible when not hovered. |
| bottomContent | ReactNode | — | The panel that slides up from below. |
| className | string | — | Extra classes. |
| accentColor | string | "#e5e5e5" | Accent for buttons and icons inside the card. Children get it as --sc-accent. |
| glowColor | string | "rgba(255,255,255,0.08)" | Soft glow in the top corner of the card. |
| borderColor | string | "rgba(255,255,255,0.1)" | Thin frame around the card. |
Dependencies
3 required packages
npm install motion clsx tailwind-merge