Uilora Horizontal
Horizontal draggable timeline with snap-to behavior.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| events | Array<{date, title, description, image}> | 6 Uilora milestones | Timeline events with thumbnails. |
| title | string | Our Timeline | Section heading. |
| subtitle | string | MILESTONES | Tag above heading. |
| accentColor | string | #5227FF | Active dot and highlight color. |
When to Use
Great for interactive roadmaps, product launch histories, and portfolios where users want to scrub through time horizontally.
Best Practices
Use 5-8 events for comfortable horizontal browsing. Include thumbnail images for visual variety.
Why This Component Matters
Horizontal timelines break the vertical scroll pattern, creating a unique interactive experience that encourages exploration.
FAQ
QIs it touch-friendly?
Yes, the drag interaction works on both mouse and touch devices with momentum scrolling.
QDoes it work on mobile?
On mobile it switches to a vertical layout for better usability on narrow screens.
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.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.