ComponentsNew
Stacked List
Cards rest in a stack, fan out into a column, scroll down and spring back together. The loop repeats on its own, great for a notification feed.
Customize
accentColor
secondaryColor
highlightColor
Based on Animated List (MIT license) · Terms of use
More in Pro
View allProps
12 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | List cards, for example notifications. |
| stackGap | number | 20 | Offset between cards in the stack in pixels. |
| columnGap | number | 85 | Distance between cards in the column in pixels. |
| scaleFactor | number | 0.05 | How much bigger each next card in the stack is. |
| scrollDownDuration | number | 5 | Seconds the column scrolls down. |
| formationDuration | number | 1 | Seconds the stack takes to fan out into a column. |
| pauseDuration | number | 600 | Rest in the stack before each loop in milliseconds. |
| visibleItems | number | 4 | How many cards are visible in the stack. |
| accentColor | string | "#ffffff" | Main colour. Cards read it as var(--stacked-accent); in the demo it tints the surface, border and icon circle. |
| secondaryColor | string | "#a3a3a3" | Second colour, var(--stacked-secondary). In the demo it ends the icon circle gradient. |
| highlightColor | string | "#ffffff" | Light highlight, var(--stacked-highlight). In the demo it colours the icons. |
| className | string | — | Extra classes. |
Dependencies
3 required packages
npm install motion clsx tailwind-merge