Sticky Pages
A pure static full-page sticky stacking scroll component where pages slide up and stack cleanly one over another without any tilting or distortion, before releasing smoothly into natural page scrolling.
Pure Static CSS Stacking · Native browser scrolling with physical shadows
position: stickyInstallation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/sticky-pages
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| pages | StickyPageItem[] | — | Array of page data objects (title, subtitle, description, badge, content, bg) |
| pageHeight | string | '100vh' | CSS height of each sticky page (e.g. 100vh, 85vh, 600px) |
| topOffset | number | 0 | Distance from top of viewport in pixels when a page locks into sticky position |
| stackOffset | number | 0 | Progressive pixel offset between stacked cards (0 for clean cover, 24 for visible deck header tabs) |
| rounded | boolean | true | Whether pages have rounded top corners (rounded-t-3xl) as they stack over one another |
| shadow | boolean | true | Whether pages cast an elevated top drop shadow over the preceding page |
| border | boolean | true | Whether pages have a subtle top highlight border |
| className | string | — | Additional CSS classes for outer container |
| children | ReactNode | — | Optional <StickyPage> elements for JSX composition mode |