Skip to content
Brok UI

Loading…

No results

Changelog

Open source

Changelog / release-notes sections — a version-rail timeline, a card grid, and a date-rail timeline with per-entry media.

Add to page builder

Preview

3 of 3

resources/views/blocks/changelog-date-rail.blade.php Blade 
@props([
    'overline' => 'Changelog',
    'heading' => "What's new",
    'subheading' => 'Every release, improvement and fix — newest first.',
    'entries' => null,
])

@php
    // A release / changelog timeline with sticky date markers on the start rail
    // and an optional image per entry. Composes the badge primitive for the
    // version tag. Static and token-driven.
    $entries ??= [
        [
            'date' => '2026 — Now',
            'version' => 'v6.0',
            'title' => 'Technical leadership expansion',
            'description' => 'Leading engineering strategy for distributed systems and high-scale platforms, driving fintech and AI/ML infrastructure performance initiatives.',
            'image' => null,
        ],
        [
            'date' => '2021 — 2023',
            'version' => 'v5.0',
            'title' => 'Architecture overhaul',
            'description' => 'Spearheaded a complete redesign of core infrastructure serving 2M+ daily users, cutting deployment time from two hours to fifteen minutes.',
            'image' => null,
        ],
        [
            'date' => '2019 — 2021',
            'version' => 'v4.0',
            'title' => 'Real-time data pipeline',
            'description' => 'Built a data-processing pipeline handling 500TB+ daily throughput, with a distributed caching layer that reduced average response time by 65%.',
            'image' => null,
        ],
    ];
@endphp

<x-ui.section space="xl" {{ $attributes }}>
    <x-ui.container size="md" gutter="sm">
        @if ($overline || $heading || $subheading)
            <div class="mb-12 flex max-w-2xl flex-col gap-4">
                @if ($overline)
                    <p class="font-mono text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">{{ __($overline) }}</p>
                @endif
                @if ($heading)
                    <h2 class="text-balance text-3xl font-bold tracking-tight text-foreground sm:text-4xl">{{ __($heading) }}</h2>
                @endif
                @if ($subheading)
                    <p class="text-pretty text-muted-foreground">{{ __($subheading) }}</p>
                @endif
            </div>
        @endif

        <x-ui.timeline :alternating="false" no-cards :vert-item-max-width="0" :vert-item-spacing="40">
            @foreach ($entries as $entry)
                <x-ui.timeline.item>
                    {{-- Sticky date column across the rail — hidden on mobile, shown inline in the content instead. --}}
                    <x-slot:aside class="hidden w-40 sm:block">
                        <x-ui.timeline.date class="sticky top-24 font-mono uppercase tracking-wider">
                            {{ $entry['date'] ?? '' }}
                        </x-ui.timeline.date>
                    </x-slot:aside>

                    <div class="pb-2">
                        @if (! empty($entry['date']))
                            <x-ui.timeline.date class="mb-2 font-mono uppercase tracking-wider sm:hidden">{{ $entry['date'] }}</x-ui.timeline.date>
                        @endif

                        <div class="flex flex-wrap items-center gap-4">
                            @if (! empty($entry['version']))
                                <x-ui.badge variant="secondary">{{ $entry['version'] }}</x-ui.badge>
                            @endif
                            <h3 class="text-lg font-semibold tracking-tight text-foreground">{{ __($entry['title'] ?? '') }}</h3>
                        </div>

                        @if (! empty($entry['image']))
                            <div class="mt-4 overflow-hidden rounded-lg border border-border bg-muted">
                                <img src="{{ $entry['image'] }}" alt="" aria-hidden="true" class="aspect-video w-full object-cover" loading="lazy" />
                            </div>
                        @endif

                        @if (! empty($entry['description']))
                            <p class="mt-4 max-w-2xl text-pretty text-muted-foreground">{{ __($entry['description']) }}</p>
                        @endif
                    </div>
                </x-ui.timeline.item>
            @endforeach
        </x-ui.timeline>
    </x-ui.container>
</x-ui.section>

Installation

terminal 
php artisan ui:add blocks/changelog-date-rail

Installs these dependencies automatically:

badge container section timeline

Registry contract

Install confidence

php artisan ui:add blocks/changelog-date-rail 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.6
License
open
Stability
stable
Contract
v1
Foundation
≥ 1.0.0
Type Generated target
blade resources/views/blocks/changelog-date-rail.blade.php

Registry dependencies

badge 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.

changelog-date-rail.md 
# Brok UI block: Changelog Timeline (`changelog-date-rail`)

A release / changelog timeline with sticky date markers on the start rail and an optional image per entry. Composes the badge primitive for the version tag.

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/changelog-date-rail
```

## Render it

```blade
<x-blocks.changelog-date-rail />
```

## Props

- `overline` (string, default `Changelog`)
- `heading` (string, default `What's new`)
- `subheading` (string, default `Every release, improvement and fix — newest first.`)
- `entries` (mixed|null, default `null`)

## Use when

- Publishing a release timeline with sticky date markers on the start rail and an optional image per entry.
- Composing the badge primitive for the version tag on each timeline entry.

## Avoid when

- Use changelog-version-rail for a rail-plus-category-tag timeline, or changelog-cards for a card-grid changelog instead.

## Rules

- Render the installed block with `<x-blocks.changelog-date-rail />` 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/changelog-date-rail
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/changelog-date-rail.json
Ask about Changelog 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

  • Publishing a release timeline with sticky date markers on the start rail and an optional image per entry.
  • Composing the badge primitive for the version tag on each timeline entry.

Avoid when

  • Use changelog-version-rail for a rail-plus-category-tag timeline, or changelog-cards for a card-grid changelog 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.changelog-date-rail />

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.

resources/views/blocks/changelog-date-rail.blade.php Blade 
@props([
    'overline' => 'Changelog',
    'heading' => "What's new",
    'subheading' => 'Every release, improvement and fix — newest first.',
    'entries' => null,
])

@php
    // A release / changelog timeline with sticky date markers on the start rail
    // and an optional image per entry. Composes the badge primitive for the
    // version tag. Static and token-driven.
    $entries ??= [
        [
            'date' => '2026 — Now',
            'version' => 'v6.0',
            'title' => 'Technical leadership expansion',
            'description' => 'Leading engineering strategy for distributed systems and high-scale platforms, driving fintech and AI/ML infrastructure performance initiatives.',
            'image' => null,
        ],
        [
            'date' => '2021 — 2023',
            'version' => 'v5.0',
            'title' => 'Architecture overhaul',
            'description' => 'Spearheaded a complete redesign of core infrastructure serving 2M+ daily users, cutting deployment time from two hours to fifteen minutes.',
            'image' => null,
        ],
        [
            'date' => '2019 — 2021',
            'version' => 'v4.0',
            'title' => 'Real-time data pipeline',
            'description' => 'Built a data-processing pipeline handling 500TB+ daily throughput, with a distributed caching layer that reduced average response time by 65%.',
            'image' => null,
        ],
    ];
@endphp

<x-ui.section space="xl" {{ $attributes }}>
    <x-ui.container size="md" gutter="sm">
        @if ($overline || $heading || $subheading)
            <div class="mb-12 flex max-w-2xl flex-col gap-4">
                @if ($overline)
                    <p class="font-mono text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">{{ __($overline) }}</p>
                @endif
                @if ($heading)
                    <h2 class="text-balance text-3xl font-bold tracking-tight text-foreground sm:text-4xl">{{ __($heading) }}</h2>
                @endif
                @if ($subheading)
                    <p class="text-pretty text-muted-foreground">{{ __($subheading) }}</p>
                @endif
            </div>
        @endif

        <x-ui.timeline :alternating="false" no-cards :vert-item-max-width="0" :vert-item-spacing="40">
            @foreach ($entries as $entry)
                <x-ui.timeline.item>
                    {{-- Sticky date column across the rail — hidden on mobile, shown inline in the content instead. --}}
                    <x-slot:aside class="hidden w-40 sm:block">
                        <x-ui.timeline.date class="sticky top-24 font-mono uppercase tracking-wider">
                            {{ $entry['date'] ?? '' }}
                        </x-ui.timeline.date>
                    </x-slot:aside>

                    <div class="pb-2">
                        @if (! empty($entry['date']))
                            <x-ui.timeline.date class="mb-2 font-mono uppercase tracking-wider sm:hidden">{{ $entry['date'] }}</x-ui.timeline.date>
                        @endif

                        <div class="flex flex-wrap items-center gap-4">
                            @if (! empty($entry['version']))
                                <x-ui.badge variant="secondary">{{ $entry['version'] }}</x-ui.badge>
                            @endif
                            <h3 class="text-lg font-semibold tracking-tight text-foreground">{{ __($entry['title'] ?? '') }}</h3>
                        </div>

                        @if (! empty($entry['image']))
                            <div class="mt-4 overflow-hidden rounded-lg border border-border bg-muted">
                                <img src="{{ $entry['image'] }}" alt="" aria-hidden="true" class="aspect-video w-full object-cover" loading="lazy" />
                            </div>
                        @endif

                        @if (! empty($entry['description']))
                            <p class="mt-4 max-w-2xl text-pretty text-muted-foreground">{{ __($entry['description']) }}</p>
                        @endif
                    </div>
                </x-ui.timeline.item>
            @endforeach
        </x-ui.timeline>
    </x-ui.container>
</x-ui.section>

Ownership & lifecycle

Owner, release state, review evidence and adoption for this item.
Owner
Platform UI (@JoshJML)
Current version
1.0.6
Status
Stable
License
open
Deprecation
Not deprecated
Contract
v1
Foundation
≥ 1.0.0