PHPackages                             mrshanebarron/timeline - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Framework](/categories/framework)
4. /
5. mrshanebarron/timeline

ActiveLibrary[Framework](/categories/framework)

mrshanebarron/timeline
======================

Timeline component for Laravel - supports Livewire and Vue

v1.0.2(6mo ago)09MITPHPPHP ^8.1

Since Dec 14Pushed 6mo agoCompare

[ Source](https://github.com/mrshanebarron/timeline)[ Packagist](https://packagist.org/packages/mrshanebarron/timeline)[ RSS](/packages/mrshanebarron-timeline/feed)WikiDiscussions main Synced today

READMEChangelog (2)Dependencies (1)Versions (4)Used By (0)

Timeline
========

[](#timeline)

Vertical timeline component for displaying chronological events in Laravel applications. Supports alternating layouts, custom colors, and animations. Works with Livewire and Vue 3.

Installation
------------

[](#installation)

```
composer require mrshanebarron/timeline
```

Livewire Usage
--------------

[](#livewire-usage)

### Basic Usage

[](#basic-usage)

```
@php
$items = [
    [
        'date' => '2 hours ago',
        'title' => 'Order Delivered',
        'description' => 'Package was delivered to the front door.'
    ],
    [
        'date' => 'Yesterday',
        'title' => 'Out for Delivery',
        'description' => 'Package is on the delivery truck.'
    ],
    [
        'date' => 'Dec 10',
        'title' => 'In Transit',
        'description' => 'Package has left the facility.'
    ],
];
@endphp

```

### Custom Colors

[](#custom-colors)

```

```

### Alternating Layout

[](#alternating-layout)

```

```

### Without Animation

[](#without-animation)

```

```

### Livewire Props

[](#livewire-props)

PropTypeDefaultDescription`items`array`[]`Array of timeline items`variant`string`'default'`Visual variant style`alternating`boolean`false`Alternate items left/right`animated`boolean`true`Enable scroll animations`lineColor`string`'gray'`Timeline line color`dotColor`string`'blue'`Timeline dot color### Item Structure

[](#item-structure)

```
$items = [
    [
        'date' => 'Dec 15, 2024',      // Date/time string
        'title' => 'Event Title',       // Required
        'description' => 'Details...',  // Optional
        'icon' => 'check',              // Optional icon name
    ],
];
```

Vue 3 Usage
-----------

[](#vue-3-usage)

### Setup

[](#setup)

```
import { SbTimeline } from './vendor/sb-timeline';
app.component('SbTimeline', SbTimeline);
```

### Basic Usage

[](#basic-usage-1)

```

const items = [
  { date: 'Today', title: 'Project Started', description: 'Kicked off the new project.' },
  { date: 'Last week', title: 'Planning Complete', description: 'Finalized the roadmap.' },
];

```

### With Options

[](#with-options)

```

```

### Vue Props

[](#vue-props)

PropTypeDefaultDescription`items`Array`[]`Timeline items`variant`String`'default'`Visual variant`alternating`Boolean`false`Alternate layout`animated`Boolean`true`Enable animations`lineColor`String`'gray'`Line color`dotColor`String`'blue'`Dot colorUse Cases
---------

[](#use-cases)

### Order Tracking

[](#order-tracking)

```
$items = [
    ['date' => now()->diffForHumans(), 'title' => 'Delivered', 'icon' => 'check'],
    ['date' => '2 days ago', 'title' => 'Shipped', 'icon' => 'truck'],
    ['date' => '3 days ago', 'title' => 'Processing', 'icon' => 'cog'],
    ['date' => '4 days ago', 'title' => 'Order Placed', 'icon' => 'cart'],
];
```

### Activity Feed

[](#activity-feed)

```
$items = User::latest()
    ->take(10)
    ->get()
    ->map(fn($user) => [
        'date' => $user->created_at->diffForHumans(),
        'title' => $user->name . ' joined',
        'description' => $user->email,
    ])
    ->toArray();
```

### Project Milestones

[](#project-milestones)

```
$items = [
    ['date' => 'Q4 2024', 'title' => 'Launch', 'description' => 'Public release'],
    ['date' => 'Q3 2024', 'title' => 'Beta', 'description' => 'Beta testing phase'],
    ['date' => 'Q2 2024', 'title' => 'Alpha', 'description' => 'Internal testing'],
    ['date' => 'Q1 2024', 'title' => 'Development', 'description' => 'Building features'],
];
```

Styling
-------

[](#styling)

The timeline includes:

- Vertical connecting line
- Colored dots for each event
- Optional fade-in animations on scroll
- Responsive design

Requirements
------------

[](#requirements)

- PHP 8.1+
- Laravel 10, 11, or 12
- Tailwind CSS 3.x

License
-------

[](#license)

MIT License

###  Health Score

32

—

LowBetter than 69% of packages

Maintenance67

Regular maintenance activity

Popularity4

Limited adoption so far

Community2

Small or concentrated contributor base

Maturity46

Maturing project, gaining track record

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~1 days

Total

3

Last Release

200d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/193358540?v=4)[Mr Shane Barron](/maintainers/mrshanebarron)[@mrshanebarron](https://github.com/mrshanebarron)

### Embed Badge

![Health badge](/badges/mrshanebarron-timeline/health.svg)

```
[![Health](https://phpackages.com/badges/mrshanebarron-timeline/health.svg)](https://phpackages.com/packages/mrshanebarron-timeline)
```

###  Alternatives

[laravel/horizon

Dashboard and code-driven configuration for Laravel queues.

4.2k95.4M306](/packages/laravel-horizon)[laravel/sail

Docker files for running a basic Laravel application.

1.9k205.7M1.3k](/packages/laravel-sail)[laravel/ai

The official AI SDK for Laravel.

1.0k3.2M194](/packages/laravel-ai)[laravel/mcp

Rapidly build MCP servers for your Laravel applications.

77022.3M151](/packages/laravel-mcp)[illuminate/routing

The Illuminate Routing package.

1419.2M3.0k](/packages/illuminate-routing)[laravel/surveyor

Static analysis tool for Laravel applications.

86121.4k11](/packages/laravel-surveyor)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)