BoseUI v2
Sticky Pages
CardsApple-style sticky stacking full-viewport pages with progressive scale shrinking, cumulative dimming overlays, smooth scroll transitions, and subtle top elevation borders.
FoundationPerformance • 01 / 03
Sub-millisecond Latency
Zero overhead CSS sticky stacking with progressive hardware-accelerated transforms.
AestheticsVisual Depth • 02 / 03
Cumulative Scaling
Covering cards smoothly shrink lower layers by 5% while casting subtle top elevation shadows.
ProductionAdaptive Design • 03 / 03
Engineered for Velocity
Self-contained component supporting custom child nodes or typed pages configuration.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:clsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/sticky-pages.json"
Props
TypeScript props supported by <StickyPages />.
| Prop | Type | Default | Description |
|---|---|---|---|
| pages | StickyPageItem[] | — | Structured array of page objects with id, title, subtitle, description, badge, and background styles. |
| pageHeight | string | "100vh" | Height specification of each sticky page or card section. |
| topOffset | number | 0 | Distance in pixels from viewport top where each page locks sticky. |
| stackOffset | number | 0 | Progressive pixel gap preserved between stacked page headers. |
| rounded | boolean | true | Apply rounded top corners (rounded-t-[2rem]) to stacked pages. |
| shadow | boolean | true | Apply top drop shadow when pages overlap previous layers. |
| border | boolean | true | Render subtle top highlight border on stacked cards. |
| scaleStep | number | 0.05 | Scale percentage delta by which each successive covering page shrinks lower layers. |
| dim | boolean | true | Gradually darken covered layers as they are occluded by subsequent pages. |
Key Features
- CSS position sticky stacking with progressive top offsets and dynamic viewport tracking.
- Hardware-accelerated scale reduction calculated per covered layer using requestAnimationFrame.
- Graduated dark dimming backdrop overlays reflecting exact layer overlap depths.
- Dual-mode support: structured pages array configuration or declarative nested JSX children.
Keyboard & Accessibility
- Retains native document scroll ergonomics with predictable touch, trackpad, and keyboard behavior.
- Uses accessible high-contrast text ratios across stacked panels with readable typography hierarchies.
- Leaves child elements interactive and focusable when not fully covered.