Uilora Stack
3D stacked depth pagination with perspective cards and glass info bar.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| pages | Array<{title, image}> | 5 design pages | Page items with title and image URL. |
| accentColor | string | #5227FF | Accent color for active dot. |
| visibleCards | number | 3 | Number of stacked cards visible. |
| className | string | "" | Additional CSS classes. |
When to Use
Ideal for creative portfolios, product showcases, and landing pages that want a unique 3D card stack effect with depth perception.
Best Practices
Use 3 visible cards for the cleanest depth effect. Square or portrait images work best for the stacked layout.
Why This Component Matters
The stacked card metaphor creates a tangible sense of browsing through a deck, making the interaction feel physical and premium.
FAQ
QCan I click to advance?
Yes, clicking the front card cycles to the next page. You can also use the arrow buttons or dots.
QDoes it loop?
Yes, the stack loops infinitely — the last card wraps back to the first.
Related Components
Uilora Dynamic
Interactive tiered pricing calculator with seat slider, billing toggle, and real-time cost breakdown.
Uilora Cloud Slider
Dark navy 3-plan cloud pricing with per-card sliders, add-on checkboxes, and live price calculation.
Uilora Matrix
Feature comparison matrix with 3 plans, monthly/yearly toggle, Pro spotlight, check/cross icons.