PM Roadmap — outcome-first roadmaps

Outcome-first roadmaps that stay honest about what is shipping.

([]); const [features, setFeatures] = useState

([]); const [loading, setLoading] = useState(true); const [draft, setDraft] = useState

(null); const [logAudience, setLogAudience] = useState

Drag between horizons. Link items to features. Draft stakeholder updates.

i.time_horizon === h.key); return (

f.id === i.feature_id); return (

Stakeholder changelog

AI-drafted from shipped features and completed roadmap items.

Now / Next / Later product roadmap.

mb-8 flex items-start justify-between gap-4 flex-wrap

text-3xl font-bold tracking-tight flex items-center gap-2

h-7 w-7 text-primary

text-muted-foreground mt-2

flex gap-2 flex-wrap

h-4 w-4 mr-2 animate-spin

flex items-center justify-center py-16

h-6 w-6 animate-spin text-muted-foreground

grid gap-4 md:grid-cols-3

flex items-start gap-2

mt-0.5 text-muted-foreground hover:text-foreground cursor-grab active:cursor-grabbing

text-sm font-medium flex-1

h-3 w-3 text-destructive

flex items-center gap-1.5 truncate

text-[10px] text-muted-foreground mt-1 truncate

text-xs text-muted-foreground text-center py-4

max-w-3xl max-h-[85vh] overflow-y-auto

flex items-center gap-2

h-5 w-5 text-primary

flex flex-wrap gap-2 items-center

flex items-center justify-center py-12

border-l-2 border-primary pl-3

text-muted-foreground mt-1

text-[10px] uppercase tracking-wider text-muted-foreground mb-2

border rounded-md p-3

font-semibold text-primary

list-disc pl-5 space-y-1

Get Started Free Open the live app →

← All Reach360 pages