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(5mo ago)09MITPHPPHP ^8.1

Since Dec 14Pushed 4mo agoCompare

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

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

33

—

LowBetter than 75% of packages

Maintenance73

Regular maintenance activity

Popularity4

Limited adoption so far

Community2

Small or concentrated contributor base

Maturity45

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

154d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/7a38dc9b4ccc180ee3e9df8879f8747ea9dbf36812c6546827fe504fa8993eb8?d=identicon)[mrshanebarron](/maintainers/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/socialite

Laravel wrapper around OAuth 1 & OAuth 2 libraries.

5.7k96.9M674](/packages/laravel-socialite)[laravel/horizon

Dashboard and code-driven configuration for Laravel queues.

4.1k84.2M225](/packages/laravel-horizon)[laravel/ui

Laravel UI utilities and presets.

2.7k134.9M601](/packages/laravel-ui)[laravel/jetstream

Tailwind scaffolding for the Laravel framework.

4.1k19.8M136](/packages/laravel-jetstream)[stancl/tenancy

Automatic multi-tenancy for your Laravel application.

4.3k6.6M40](/packages/stancl-tenancy)[internachi/modular

Modularize your Laravel apps

1.1k662.4k8](/packages/internachi-modular)

PHPackages © 2026

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