M Majid DS mds
GitHub

mds components

mds:timeline

An event timeline — an open version of a Flux Pro component.

The rail runs down the leading edge, so it sits on the right in RTL and the left in LTR.

  1. Order placed
  2. Payment confirmed
    Online
  3. Delivered
<mds:timeline>
    <mds:timeline.item>
        <mds:timeline.indicator>
            <flux:icon icon="shopping-bag" variant="micro" />
        </mds:timeline.indicator>
        <mds:timeline.content>
            <flux:heading>Order placed</flux:heading>
        </mds:timeline.content>
    </mds:timeline.item>

    <mds:timeline.item>
        <mds:timeline.indicator>
            <flux:icon icon="banknotes" variant="micro" />
        </mds:timeline.indicator>
        <mds:timeline.content>
            <flux:heading>Payment confirmed <flux:badge size="sm" color="lime">Online</flux:badge></flux:heading>
        </mds:timeline.content>
    </mds:timeline.item>

    <mds:timeline.item>
        <mds:timeline.indicator color="green">
            <flux:icon icon="check" variant="micro" />
        </mds:timeline.indicator>
        <mds:timeline.content>
            <flux:heading>Delivered</flux:heading>
        </mds:timeline.content>
    </mds:timeline.item>
</mds:timeline>

Numbered steps

status marks each item complete, current or incomplete.

  1. 1
    Cart

    Review the items and finalize quantities.

  2. 2
    Shipping

    Pick the address and a delivery window.

  3. 3
    Payment
<mds:timeline size="lg" align="start">
    <mds:timeline.item status="complete">
        <mds:timeline.indicator>1</mds:timeline.indicator>
        <mds:timeline.content>
            <flux:heading>Cart</flux:heading>
            <flux:text>Review the items and finalize quantities.</flux:text>
        </mds:timeline.content>
    </mds:timeline.item>

    <mds:timeline.item status="current">
        <mds:timeline.indicator>2</mds:timeline.indicator>
        <mds:timeline.content>
            <flux:heading>Shipping</flux:heading>
            <flux:text>Pick the address and a delivery window.</flux:text>
        </mds:timeline.content>
    </mds:timeline.item>

    <mds:timeline.item status="incomplete">
        <mds:timeline.indicator>3</mds:timeline.indicator>
        <mds:timeline.content>
            <flux:heading>Payment</flux:heading>
        </mds:timeline.content>
    </mds:timeline.item>
</mds:timeline>

Horizontal

  1. Paid
  2. Packed
  3. Shipping
  4. Delivered
<mds:timeline horizontal>
    <mds:timeline.item status="complete">
        <mds:timeline.indicator><flux:icon icon="credit-card" variant="micro" /></mds:timeline.indicator>
        <mds:timeline.content><flux:heading>Paid</flux:heading></mds:timeline.content>
    </mds:timeline.item>

    <mds:timeline.item status="complete">
        <mds:timeline.indicator><flux:icon icon="archive-box" variant="micro" /></mds:timeline.indicator>
        <mds:timeline.content><flux:heading>Packed</flux:heading></mds:timeline.content>
    </mds:timeline.item>

    <mds:timeline.item status="current">
        <mds:timeline.indicator><flux:icon icon="truck" variant="micro" /></mds:timeline.indicator>
        <mds:timeline.content><flux:heading>Shipping</flux:heading></mds:timeline.content>
    </mds:timeline.item>

    <mds:timeline.item status="incomplete">
        <mds:timeline.indicator><flux:icon icon="home" variant="micro" /></mds:timeline.indicator>
        <mds:timeline.content><flux:heading>Delivered</flux:heading></mds:timeline.content>
    </mds:timeline.item>
</mds:timeline>

Indicator alignment

With long content, align decides where the dot sits: start, baseline, center (the default) or end.

  1. 1
    Submit documents

    Upload a photo of your ID and your latest certificate so our team can review your file.

<mds:timeline align="baseline">
    <mds:timeline.item>
        <mds:timeline.indicator>1</mds:timeline.indicator>
        <mds:timeline.content>
            <flux:heading>Submit documents</flux:heading>
            <flux:text>Upload a photo of your ID and your latest certificate so our team can review your file.</flux:text>
        </mds:timeline.content>
    </mds:timeline.item>
</mds:timeline>

Full-width blocks

A block spans the whole row instead of sitting beside an indicator — for a quoted reply or an embedded card.

  1. Mahdi left a comment
  2. Support replied

    Your parcel ships from the Tehran warehouse today.

<mds:timeline>
    <mds:timeline.item>
        <mds:timeline.indicator><flux:icon icon="chat-bubble-left-right" variant="micro" /></mds:timeline.indicator>
        <mds:timeline.content>
            <flux:heading>Mahdi <flux:text inline>left a comment</flux:text></flux:heading>
        </mds:timeline.content>
    </mds:timeline.item>

    <mds:timeline.item>
        <mds:timeline.block class="overflow-hidden rounded-xl border border-zinc-200 bg-zinc-50 dark:border-white/10 dark:bg-white/5">
            <mds:timeline.subgrid class="p-3">
                <flux:avatar size="xs" circle src="https://picsum.photos/seed/user/64/64" />
                <div class="space-y-1">
                    <flux:heading>Support <flux:text inline>replied</flux:text></flux:heading>
                    <flux:text>Your parcel ships from the Tehran warehouse today.</flux:text>
                </div>
            </mds:timeline.subgrid>
        </mds:timeline.block>
    </mds:timeline.item>
</mds:timeline>

In RTL

On this RTL preview the rail sits on the right with no extra props — it follows the leading edge. The timeline has no digits or built-in strings of its own, so nothing reads config('mds.persian_digits'); the date here is mds:jalali-date with :fa="true".

  1. سفارش ثبت شد

  2. پرداخت تأیید شد
    آنلاین
  3. تحویل شد
<mds:timeline>
    <mds:timeline.item>
        <mds:timeline.indicator>
            <flux:icon icon="shopping-bag" variant="micro" />
        </mds:timeline.indicator>
        <mds:timeline.content>
            <flux:heading>سفارش ثبت شد</flux:heading>
            <flux:text><mds:jalali-date :date="now()->subDays(4)" :fa="true" /></flux:text>
        </mds:timeline.content>
    </mds:timeline.item>

    <mds:timeline.item>
        <mds:timeline.indicator>
            <flux:icon icon="banknotes" variant="micro" />
        </mds:timeline.indicator>
        <mds:timeline.content>
            <flux:heading>پرداخت تأیید شد <flux:badge size="sm" color="lime">آنلاین</flux:badge></flux:heading>
        </mds:timeline.content>
    </mds:timeline.item>

    <mds:timeline.item>
        <mds:timeline.indicator color="green">
            <flux:icon icon="check" variant="micro" />
        </mds:timeline.indicator>
        <mds:timeline.content>
            <flux:heading>تحویل شد</flux:heading>
        </mds:timeline.content>
    </mds:timeline.item>
</mds:timeline>

Reference

mds:timeline

PropDescription
horizontalLays the timeline out along the inline axis. Default: false.
alignIndicator alignment: start, baseline, center, end. Default: center.
sizeOptions: lg.

mds:timeline.item

PropDescription
statusOptions: complete, current, incomplete.
alignOverrides the timeline's alignment for this item.
sizeOverrides the timeline's size for this item.

mds:timeline.indicator

PropDescription
colorAny Tailwind color.
variantOptions: bare for no chrome around the glyph.
statusOverrides the item's status for this indicator.

mds:timeline.content

The text beside an indicator.

mds:timeline.block

A row that spans the full width, with no indicator.

mds:timeline.subgrid

Aligns nested content with the timeline's own columns.

Related

mds:stepperCheckout steps, with the completed ones ticked.mds:jalali-dateJalali (Shamsi) dates, with no external calendar dependency.mds:chartMonochrome dashboard charts, server-rendered as SVG — an open answer to a Flux Pro component.