Roadmap Page Design
A step-by-step recipe for building a product roadmap page with timeline, status indicators, and voting.
Step 1 — Layout Structure
Use a two-column grid on desktop: a sticky sidebar for filters and a main content area for the timeline. On mobile, collapse the sidebar into a horizontal scroll or a slide-out panel.
<div className="grid grid-cols-1 lg:grid-cols-[240px_1fr] gap-8"> <aside className="hidden lg:block sticky top-24">...</aside> <section>...</section> </div>
Step 2 — Timeline Items
Each roadmap item is a card with a colored left border indicating status: violet for planned, pink for in-progress, green for shipped. Include title, description, target quarter, and an upvote button.
<div className="border-l-4 border-[#8B5CF6] pl-4 py-2"> <span className="text-xs text-[#8B5CF6]">Planned</span> <h3 className="font-medium">Dark mode</h3> <p className="text-sm text-white/50">Q3 2026</p> </div>
Step 3 — Status Badges
Define three badge variants using Tailwind color classes. Keep them small and consistent so users can scan the page quickly.
Step 4 — Voting Interaction
Add an upvote button to each card. Display the current count. The button should have a hover state and a filled state when the user has voted. Use a simple counter element.
<button className="flex items-center gap-1.5 rounded-md border border-white/10 px-3 py-1.5 text-sm hover:border-[#8B5CF6]/40 hover:text-[#8B5CF6] transition-colors"> ▲ <span>42</span> </button>
Step 5 — Empty State
When no items match the active filter, show a centered empty state with a subtle illustration placeholder and a clear message. Offer a reset-filters action.
No items match your filters.
Reset filters →