Roadmap

Open source

Product roadmap sections — Now / Next / Later columns of votable feature cards.

2 of 2

resources/views/blocks/roadmap-timeline.blade.php Blade

@props([
    'eyebrow'    => 'Roadmap',
    'heading'    => 'Our 2026 plan',
    'lead'       => 'Follow our quarterly milestones — from shipped features to what we\'re planning for the rest of the year.',
    'milestones' => null,
])

@php
    $milestones ??= [
        ['quarter' => 'Q1 2026', 'status' => 'shipped', 'title' => 'Foundation release', 'items' => ['Core component library', 'Design-token theming', 'Registry CLI & install flow']],
        ['quarter' => 'Q2 2026', 'status' => 'in-progress', 'title' => 'Developer experience', 'items' => ['Interactive previews & docs', 'Figma token sync', 'Block scaffolding command']],
        ['quarter' => 'Q3 2026', 'status' => 'planned', 'title' => 'Ecosystem expansion', 'items' => ['Pro component library', 'Block marketplace', 'Accessibility audit tooling']],
        ['quarter' => 'Q4 2026', 'status' => 'planned', 'title' => 'Platform maturity', 'items' => ['Multi-brand theming', 'i18n & RTL expansion kit', 'Enterprise license tier']],
    ];
    $statusMap = [
        'shipped' => ['variant' => 'success', 'label' => 'Shipped', 'dot' => 'bg-success', 'node' => 'success'],
        'in-progress' => ['variant' => 'secondary', 'label' => 'In progress', 'dot' => 'bg-primary', 'node' => 'default'],
        'planned' => ['variant' => 'outline', 'label' => 'Planned', 'dot' => 'bg-muted-foreground', 'node' => 'secondary'],
    ];
@endphp

<x-ui.section space="xl" {{ $attributes }}>
    <x-ui.container gutter="sm">
        <div class="mx-auto mb-14 max-w-2xl text-center sm:mb-16">
            <span class="mb-4 inline-block text-sm font-semibold uppercase tracking-widest text-primary">{{ __($eyebrow) }}</span>
            <h2 class="mt-2 text-3xl font-bold tracking-tight sm:text-4xl">{{ __($heading) }}</h2>
            <p class="mt-4 text-base leading-relaxed text-muted-foreground sm:text-lg">{{ __($lead) }}</p>
        </div>

        {{-- Desktop: horizontal node row + cards below; Mobile: vertical rail --}}
        <div class="hidden lg:block">
            <div class="relative flex items-center justify-between" aria-hidden="true">
                <div class="absolute inset-x-0 top-1/2 h-px -translate-y-1/2 bg-border"></div>
                @foreach ($milestones as $milestone)
                    @php $map = $statusMap[$milestone['status']] ?? $statusMap['planned']; @endphp
                    <span class="relative z-10 flex size-5 items-center justify-center rounded-full ring-4 ring-background {{ $map['dot'] }}"></span>
                @endforeach
            </div>
            <div class="mt-6 grid grid-cols-4 gap-6">
                @foreach ($milestones as $milestone)
                    @php $map = $statusMap[$milestone['status']] ?? $statusMap['planned']; @endphp
                    <x-ui.card class="flex flex-col p-6">
                        <div class="mb-4 flex flex-wrap items-center gap-2">
                            <x-ui.badge variant="outline" size="sm">{{ __($milestone['quarter']) }}</x-ui.badge>
                            <x-ui.badge variant="{{ $map['variant'] }}" size="sm">{{ __($map['label']) }}</x-ui.badge>
                        </div>
                        <h3 class="mb-2 text-sm font-semibold leading-snug">{{ __($milestone['title']) }}</h3>
                        <ul class="mt-auto space-y-2">
                            @foreach ($milestone['items'] as $item)
                                <li class="flex items-start gap-2 text-sm text-muted-foreground"><span class="mt-2 size-1 shrink-0 rounded-full bg-muted-foreground/50" aria-hidden="true"></span><span>{{ __($item) }}</span></li>
                            @endforeach
                        </ul>
                    </x-ui.card>
                @endforeach
            </div>
        </div>

        <x-ui.timeline :alternating="false" no-cards :vert-item-max-width="0" :vert-item-spacing="40" class="lg:hidden" aria-label="{{ __('Product roadmap timeline') }}">
            @foreach ($milestones as $milestone)
                @php $map = $statusMap[$milestone['status']] ?? $statusMap['planned']; @endphp
                <x-ui.timeline.item :variant="$map['node']">
                    <x-ui.card class="p-6">
                        <div class="mb-4 flex flex-wrap items-center gap-2">
                            <x-ui.badge variant="outline" size="sm">{{ __($milestone['quarter']) }}</x-ui.badge>
                            <x-ui.badge variant="{{ $map['variant'] }}" size="sm">{{ __($map['label']) }}</x-ui.badge>
                        </div>
                        <h3 class="mb-2 text-sm font-semibold leading-snug">{{ __($milestone['title']) }}</h3>
                        <ul class="space-y-2">
                            @foreach ($milestone['items'] as $item)
                                <li class="flex items-start gap-2 text-sm text-muted-foreground"><span class="mt-2 size-1 shrink-0 rounded-full bg-muted-foreground/50" aria-hidden="true"></span><span>{{ __($item) }}</span></li>
                            @endforeach
                        </ul>
                    </x-ui.card>
                </x-ui.timeline.item>
            @endforeach
        </x-ui.timeline>
    </x-ui.container>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/roadmap-timeline

Installs these dependencies automatically:

badge card container section timeline

Registry contract

Install confidence

php artisan ui:add blocks/roadmap-timeline writes only the generated targets below. The CLI validates each file hash before writing and prompts before replacing local changes unless --force is used.

Version: 1.0.5
License: open
Stability: stable
Contract: v1
Foundation: ≥ 1.0.0

Type	Generated target
blade	resources/views/blocks/roadmap-timeline.blade.php

Registry dependencies

badge card container section timeline

Package dependencies

composer: jml/brok:^0.2

Use with AI

A brief for your coding agent: what the block is, the install command, how to render it, its props and the rules. Copy it, or open a prompt about this block in an assistant.

roadmap-timeline.md

# Brok UI block: Roadmap Timeline (`roadmap-timeline`)

A product roadmap as a horizontal quarter timeline (vertical rail on mobile) of milestone cards with status badges.

Brok UI is a Laravel Blade registry. `ui:add` copies this block into the app as plain Blade the app owns; it composes installed `<brok:*>` primitives and semantic design tokens.

## Install

```bash
php artisan ui:add blocks/roadmap-timeline
```

## Render it

```blade
<x-blocks.roadmap-timeline />
```

## Props

- `eyebrow` (string, default `Roadmap`) — Small label shown above the heading.
- `heading` (string, default `Our 2026 plan`) — Section heading.
- `lead` (string, default `Follow our quarterly milestones — from shipped features to what we\'re planning for the rest of the year.`) — Supporting lead paragraph under the heading.
- `milestones` (mixed|null, default `null`) — Quarterly milestone entries with a status and a list of shipped items; null falls back to sample data.

## Use when

- Showing a product roadmap as a horizontal quarter-by-quarter timeline of milestones with shipped, in-progress and planned status badges.
- Wanting the story told as chronological progress rather than a voting-style backlog.

## Avoid when

- Wanting a Now/Next/Later voting-style board instead of a timeline; use roadmap-columns instead.

## Rules

- Render the installed block with `<x-blocks.roadmap-timeline />` and pass data through its props; edit the copied file only for structural changes.
- Keep the semantic design tokens (`bg-background`, `text-muted-foreground`); never swap in raw colour utilities.
- Keep the `data-slot` attributes and the logical (start/end) spacing so the markup still mirrors under `dir="rtl"`.

## Links

- Docs: https://brokui.dev/blocks/roadmap-timeline
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/roadmap-timeline.json

Ask about Roadmap Timeline in

Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.

Guidance

Use when

Showing a product roadmap as a horizontal quarter-by-quarter timeline of milestones with shipped, in-progress and planned status badges.
Wanting the story told as chronological progress rather than a voting-style backlog.

Avoid when

Wanting a Now/Next/Later voting-style board instead of a timeline; use roadmap-columns instead.

Anti-patterns

Do not replace semantic props with conflicting utility classes.
Do not remove labels, focus styles, or state attributes.

Usage

Render the block as a component, passing data where useful:

resources/views/welcome.blade.php Blade

<x-blocks.roadmap-timeline />

Built from primitives

Composes <brok:*> Semantic tokens Re-themeable RTL-ready

This block composes installed <brok:*> primitives and semantic design tokens only — it does not reimplement any primitive. Re-theme it (light, dark, admin, customer) by editing CSS variables; flip the preview to RTL to confirm it mirrors.

Source

The exact, editable file ui:add writes into your app. The preview above renders this same source — there are no preview-only blocks.