Skip to main content
The timeline component displays a list of events in chronological order with a vertical line connecting them. Each event can have an icon, color, date, title, and description.

Basic Usage

SELECT 'timeline' AS component;
SELECT 
    'First Event' AS title,
    '2024-03-01' AS date,
    'This is the first event' AS description;

Top-Level Properties

simple
boolean
Display timeline in condensed format without icons

Event Properties

title
text
required
Name of the event
date
text
required
Date or time of the event (displayed on the right side)
icon
icon
Icon to display next to the event (from tabler-icons.io). Default: ‘git-commit’
color
color
Color of the icon background
description
text
Textual description of the event
description_md
text
Description in Markdown format with rich text support
Link to a page with more information about the event

Examples

Simple Timeline

SELECT 'timeline' AS component, true AS simple;

SELECT 
    'New message from Elon Musk' AS title,
    '13:00' AS date;

SELECT 
    'Jeff Bezos assigned task "work more" to you.' AS title,
    'yesterday, 16:35' AS date;

Rich Timeline with Icons and Colors

SELECT 'timeline' AS component;

SELECT 
    'v0.13.0 was just released!' AS title,
    'https://github.com/sqlpage/SQLPage/releases/' AS link,
    '2023-10-16' AS date,
    'brand-github' AS icon,
    'green' AS color,
    'This version introduces the `timeline` component.' AS description_md;

SELECT 
    'They are talking about us...' AS title,
    '[This article](https://www.postgresql.org/about/news/) on PostgreSQL website mentions SQLPage.' AS description_md,
    '2023-07-12' AS date,
    'database' AS icon,
    'blue' AS color;

Project Timeline

SELECT 'timeline' AS component;

SELECT 
    'Project Kickoff' AS title,
    '2024-01-15' AS date,
    'star' AS icon,
    'yellow' AS color,
    'Initial project meeting with stakeholders' AS description;

SELECT 
    'Requirements Gathering' AS title,
    '2024-01-22' AS date,
    'clipboard-list' AS icon,
    'blue' AS color,
    'Completed functional requirements document' AS description;

SELECT 
    'Development Phase' AS title,
    '2024-02-01' AS date,
    'code' AS icon,
    'purple' AS color,
    '**Sprint 1-4**: Core features implementation' AS description_md;

SELECT 
    'Testing & QA' AS title,
    '2024-03-01' AS date,
    'bug' AS icon,
    'orange' AS color,
    'Quality assurance and bug fixing' AS description;

SELECT 
    'Launch' AS title,
    '2024-03-15' AS date,
    'rocket' AS icon,
    'green' AS color,
    '/launch-details.sql' AS link,
    '**Production deployment successful!**' AS description_md;

Company History Timeline

SELECT 'timeline' AS component;

SELECT 
    'Company Founded' AS title,
    '2010-06-01' AS date,
    'building' AS icon,
    'Started in a garage with 3 founders' AS description;

SELECT 
    'First Customer' AS title,
    '2010-09-15' AS date,
    'user-check' AS icon,
    'green' AS color,
    'Signed our first enterprise customer' AS description;

SELECT 
    'Series A Funding' AS title,
    '2012-03-20' AS date,
    'currency-dollar' AS icon,
    'blue' AS color,
    'Raised $5M in Series A funding' AS description;

SELECT 
    'International Expansion' AS title,
    '2015-01-10' AS date,
    'world' AS icon,
    'purple' AS color,
    'Opened offices in London and Tokyo' AS description;

SELECT 
    'IPO' AS title,
    '2020-11-05' AS date,
    'trending-up' AS icon,
    'yellow' AS color,
    'Successfully went public on NASDAQ' AS description;

Activity Log Timeline

SELECT 'timeline' AS component;

SELECT 
    'User Login' AS title,
    'Just now' AS date,
    'login' AS icon,
    'green' AS color,
    'User **john.doe** logged in from IP 192.168.1.100' AS description_md;

SELECT 
    'File Upload' AS title,
    '5 minutes ago' AS date,
    'upload' AS icon,
    'blue' AS color,
    'Uploaded `report_2024.pdf` (2.3 MB)' AS description_md;

SELECT 
    'Settings Changed' AS title,
    '1 hour ago' AS date,
    'settings' AS icon,
    'Updated notification preferences' AS description;

SELECT 
    'Failed Login Attempt' AS title,
    '2 hours ago' AS date,
    'alert-triangle' AS icon,
    'red' AS color,
    'Failed login from IP 45.67.89.123' AS description;

Notes

The timeline component is perfect for displaying chronological events, version histories, activity logs, or project milestones.
Use the simple property for compact timelines with many events, or omit it for a more visually rich timeline with icons.
Combine colors and icons to create visual categories for different types of events.
The date field accepts any text, so you can use relative times like “Just now”, “5 minutes ago”, or precise dates like “2024-03-02”.

Build docs developers (and LLMs) love