Q1 2025
DoneA calmer foundation
A new workspace architecture makes every project faster to navigate and easier to share.
Roadmap Cards
A free animated roadmap component React and Next.js teams can use for product milestones.
Product roadmap
Building the workspace teams deserve
What we have shipped, what we are refining now, and the foundations already taking shape for what comes next.
Q2 2025
DoneCollaboration, rebuilt
Live presence, focused review threads, and durable hand-offs bring teams into one clear flow.
Q3 2025
CurrentAdaptive workflows
Flexible stages now respond to the way each team plans, reviews, and ships its best work.
Q4 2025
NextThe developer platform
Public APIs, event streams, and composable automations open the workspace to every tool.
Early 2026
An intelligence layer
Context-aware assistance will turn project history into useful briefs, decisions, and next steps.
Roadmap Cards is a free roadmap component React and Next.js teams can use to present shipped, current, and upcoming milestones. When the roadmap has room, cards alternate around a centre spine and enter from their own side. In a narrower space, the same chronology becomes one readable column beside a left spine. The layout follows the roadmap's own width rather than the screen's, so it also fits a sidebar or a narrow column.
Pass three to eight items in chronological order and the component handles the responsive layout and scroll choreography. Each milestone reveals once, as it scrolls into view, and stays revealed. It uses one semantic ordered list, visible status labels, and aria-current on the active step. Reduced-motion visitors see the complete roadmap at rest from the start, with nothing animating, while standard motion uses transform and opacity only.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/timeline-roadmapUsage
import { TimelineRoadmap } from "@/components/timeline-roadmap";
export default function Page() {
return (
<TimelineRoadmap
items={[
{ id: "foundation", period: "Q1", title: "Foundation", description: "The new workspace ships.", status: "done" },
{ id: "workflows", period: "Q2", title: "Workflows", description: "Adaptive planning enters beta.", status: "now" },
{ id: "platform", period: "Q3", title: "Platform", description: "Public APIs arrive next.", status: "next" },
]}
className="mx-auto max-w-5xl"
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { id: string; period: string; title: string; description: string; status?: "done" | "now" | "next" }[] | required | Three to eight milestones in chronological order. IDs must remain stable across updates, and at most one item should use the now status. |
| className | string | undefined | Additional classes merged onto the roadmap section root. |
Customisation
Roadmap Cards deliberately keeps its reveal distances, timing, breakpoint (48rem of its own width), and geometry fixed. Use className for outer width and spacing, and customise the standard semantic colour tokens in your theme to restyle the cards, spine, markers, and status accents without changing the component API.
:root {
--surface: color-mix(in oklch, var(--primary) 6%, var(--background));
--border: color-mix(in oklch, var(--foreground) 16%, transparent);
}
<TimelineRoadmap items={items} className="mx-auto max-w-6xl" />Frequently asked questions
- Is Roadmap Cards free for commercial use?
- Yes. Roadmap Cards is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Does the roadmap preserve chronological reading order?
- Yes. Every milestone stays in one ordered list and CSS alone controls which side a desktop card occupies. Screen readers, search engines, and mobile layouts therefore receive the same chronological sequence.
- What happens when reduced motion is enabled?
- Nothing animates. Every card and marker is shown in its final state from the first paint, so the complete roadmap is immediately visible and usable. If reduced motion is turned on while a milestone is revealing, that reveal finishes in place at once.