# Timeline component

**URL:** <https://community.plotly.com/t/timeline-component/64584>\
**Category:** Dash Python\
**Created:** [May 28, 2022, 4:06am UTC](https://community.plotly.com/t/timeline-component/64584 "2022-05-28T04:06:28Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [May 28, 2022, 6:30pm UTC](https://community.plotly.com/t/timeline-component/64584/3 "2022-05-28T18:30:02Z")

</div>

@entropy_l

The Gantt charts are a great option. And if you were looking for a Timeline Component, check out [https://www.dash-mantine-components.com/](https://www.dash-mantine-components.com/)

This component is available, but it’s not yet in the Dash Mantine documentation. You can see it in the React Mantine docs: [https://mantine.dev/core/timeline/](https://mantine.dev/core/timeline/)

In the meantime, here is an example:

![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/3/d/3de689e6da550904ee80ea9e760017c11fd03e3d.png)

```auto
import dash_mantine_components as dmc
from dash import Dash

app = Dash( __name__ )

app.layout = dmc.Timeline(
    [
        dmc.TimelineItem(
            "pip install dash-mantine-components",
        ),
        dmc.TimelineItem(
            [
                "Check out our ",
                dmc.Anchor(
                    "documentation",
                    href="https://www.dash-mantine-components.com/",
                    underline=False,
                ),
            ],
        ),
        dmc.TimelineItem(
            [
                "Join our ",
                dmc.Anchor(
                    "Discord", href="https://discord.gg/KuJkh4Pyq5", underline=False
                ),
                " Community.",
            ],
        ),
        dmc.TimelineItem("Make something cool"),
        dmc.TimelineItem(
            "Share your app in show-and-tell!",
        ),
    ],
    active=3,
)

if __name__ == " __main__":
    app.run_server()

```

* * *

And just for fun, here is an example with icons:

![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/2/7/27f29bdd92aa6bc9ce91b0fad4e2cd14bac5c26b.png)

```auto
import dash_mantine_components as dmc
from dash import Dash
from dash_iconify import DashIconify

app = Dash( __name__ )

def make_icon(icon):
    return [
        dmc.ThemeIcon(
            radius="xl", variant="outline", children=[DashIconify(icon=icon, width=16)]
        )
    ]

app.layout = dmc.Timeline(
    [
        dmc.TimelineItem(
            "pip install dash-mantine-components",
            bullet=make_icon("akar-icons:circle-check"),
        ),
        dmc.TimelineItem(
            [
                "Check out our ",
                dmc.Anchor(
                    "documentation",
                    href="https://www.dash-mantine-components.com/",
                    underline=False,
                ),
            ],
            bullet=make_icon("charm:rocket"),
        ),
        dmc.TimelineItem(
            [
                "Join our ",
                dmc.Anchor(
                    "Discord", href="https://discord.gg/KuJkh4Pyq5", underline=False
                ),
                " Community.",
            ],
            bullet=make_icon("fa-brands:discord"),
        ),
        dmc.TimelineItem("Make something cool", bullet=make_icon("carbon:face-cool")),
        dmc.TimelineItem(
            "Share your app in show-and-tell!",
            bullet=make_icon("twemoji:confetti-ball"),
        ),
    ],
    active=0,
)

if __name__ == " __main__":
    app.run_server()

```

---

_[View the full topic](https://community.plotly.com/t/timeline-component/64584)._