CardsProNew
Sticky Stack Cards
As you scroll, the cards pile on top of each other with a slight tilt. Built on CSS sticky alone, no JavaScript.
Customize
cardColor
secondaryColor
highlightColor
Based on CSS Card Stacking (MIT license) · Terms of use
Props
9 properties| Property | Type | Default | Description |
|---|---|---|---|
| cards | { title: string; description: string; href?: string; linkLabel?: string }[] | — | Cards of the stack: title, text and link. |
| aside | ReactNode | — | Pinned block on the right, such as a section title. Hidden on phones. |
| height | string | "100vh" | Height of one scroll step, any CSS length. |
| tilt | number | 6 | Card tilt in degrees. They alternate: right, straight, left. |
| cardWidth | number | 420 | Card width in pixels. |
| className | string | — | Extra classes. |
| cardColor | string | "#a3a3a3" | Color of the second card in each group of four. Text turns dark or white on its own. |
| secondaryColor | string | "#262626" | Color of the third card in each group of four. |
| highlightColor | string | "#f5f5f5" | Light color of the first card in each group of four. |
Dependencies
2 required packages
npm install clsx tailwind-merge