Fluxo UIFluxo UIv0.4.1

Timeline

A timeline component for displaying chronological events with vertical/horizontal layouts, custom markers, and multiple alignment options.

Basic Usage

Order Tracking Timeline

A vertical left-aligned timeline showing order progress.

  1. Jan 15, 2025 - 9:00 AM

    Order Placed

    Your order #12345 has been placed successfully.

  2. Jan 15, 2025 - 9:05 AM

    Payment Confirmed

    Payment of $299.99 has been processed.

  3. Jan 16, 2025 - 2:30 PM

    Order Shipped

    Your package is on its way via Express Delivery.

  4. Jan 17, 2025 - 8:00 AM

    Out for Delivery

    The package is out for delivery in your area.

  5. Jan 17, 2025 - 11:45 AM

    Delivered

    Your package has been delivered. Enjoy!

import { Timeline } from 'fluxo-ui';
import type { TimelineEvent } from 'fluxo-ui';

const events: TimelineEvent[] = [
  { id: '1', title: 'Order Placed', description: 'Order #12345 placed.', timestamp: 'Jan 15', color: 'primary' },
  { id: '2', title: 'Payment Confirmed', description: 'Payment processed.', timestamp: 'Jan 15', color: 'success' },
  { id: '3', title: 'Shipped', description: 'Package on its way.', timestamp: 'Jan 16', color: 'info' },
  { id: '4', title: 'Delivered', description: 'Package delivered.', timestamp: 'Jan 17', color: 'success' },
];

<Timeline events={events} />

Horizontal Layout

Use layout="horizontal" for a left-to-right timeline ideal for project milestones.

Horizontal Timeline

A horizontal layout for project milestones or step-based workflows.

  1. Week 1

    Research

  2. Week 2-3

    Design

  3. Week 4-8

    Development

  4. Week 9-10

    Testing

  5. Week 11

    Launch

import { Timeline } from 'fluxo-ui';

<Timeline
  events={events}
  layout="horizontal"
/>

Alternate Alignment

Use align="alternate" to place events on alternating sides of the timeline axis.

Alternate Alignment

Events alternate between left and right sides of the timeline axis.

  1. 2018

    Founded

    Company was founded in a small garage with a big dream.

  2. 2019

    Series A Funding

    Raised $5M in Series A to expand the team.

  3. 2020

    Product Launch

    Launched the flagship product to 10,000 users.

  4. 2021

    Global Expansion

    Opened offices in 3 new countries across Europe and Asia.

  5. 2023

    IPO

    Went public on the NASDAQ stock exchange.

  6. 2024

    1M Users

    Reached one million active users worldwide.

import { Timeline } from 'fluxo-ui';

<Timeline
  events={events}
  align="alternate"
  connectorStyle="dashed"
/>

Custom Markers

Pass an icon or marker on each event to customize the timeline markers.

Custom Icons & Markers

Use custom SVG icons in the timeline markers. Combine with markerSize for larger icons.

  1. 10:00 AM

    Task Completed

    Initial setup finished.

  2. 11:30 AM

    Achievement Unlocked

    First milestone reached!

  3. 2:00 PM

    Deployment

    Application deployed to production.

  4. 3:45 PM

    Review Done

    Code review passed all checks.

import { Timeline } from 'fluxo-ui';

const checkIcon = <svg>...</svg>;

const events = [
  {
    id: '1',
    title: 'Task Completed',
    icon: checkIcon,
    color: 'success',
  },
  // ...
];

<Timeline
  events={events}
  markerSize="lg"
/>

Import

import { Timeline } from 'fluxo-ui';
import type { TimelineEvent, TimelineProps } from 'fluxo-ui';

Timeline Props

eventsreq
TimelineEvent[]

Array of timeline event data.

layout
'vertical' | 'horizontal'"'vertical'"

Timeline orientation.

align
'left' | 'right' | 'alternate'"'left'"

Content alignment relative to the timeline axis.

connectorStyle
'solid' | 'dashed' | 'dotted'"'solid'"

Style of the connector lines between events.

markerSize
'sm' | 'md' | 'lg'"'md'"

Size of timeline markers.

className
string

Additional CSS class for the container.

headingLevel
1 | 2 | 3 | 4 | 5 | 6"4"

Heading level used for each event title (h1-h6).

ariaLabel
string"'Timeline'"

Accessible name for the timeline container.

TimelineEvent Interface

idreq
string

Unique identifier for the event.

titlereq
string

Event title text.

description
ReactNode

Event description or body content.

timestamp
string

Timestamp or date label.

icon
ReactNode

Custom icon displayed in the marker.

color
'primary' | 'success' | 'warning' | 'danger' | 'info'

Color theme for the marker.

marker
ReactNode

Fully custom marker element (overrides icon and dot).

content
ReactNode

Additional custom content below description.

href
string

When set, renders the event content as a link to this URL.

onClick
() => void

When set, renders the event content as a button that fires this callback (mutually exclusive with href).

Features

Vertical & Horizontal

Two layout modes for different use cases: vertical scrolling or horizontal milestone display.

Alternate Alignment

Events can alternate between left and right for a visually balanced layout.

Custom Markers

Use icons, custom elements, or the default dot as timeline markers.

Color Variants

Five color options: primary, success, warning, danger, and info.

Connector Styles

Solid, dashed, or dotted connector lines between timeline markers.

Accessibility

Semantic list markup with ARIA roles for screen reader support.