VISION  |  Docs

Timeline

The timeline components helps you to simply create a beautiful timeline for your pages. It contains two components the TimelineList and the TimelineItem.

The below codes are editable and you can modify them the way you want directly from your browser, please use the green button or the ctrl + s to save the changes.

Demo

// Vision UI Dashboard React examples import TimelineList from "examples/Timeline/TimelineList"; import TimelineItem from "examples/Timeline/TimelineItem";
Timeline
$2400 Design changes
22 DEC 7:20 PM
People care about how you see the world, how you think, what motivates you, what you’re struggling with or afraid of.
design
New order #1832412
21 DEC 11 PM
People care about how you see the world, how you think, what motivates you, what you’re struggling with or afraid of.
order
#1832412
Server payments for April
21 DEC 9:34 PM
People care about how you see the world, how you think, what motivates you, what you’re struggling with or afraid of.
server
payments

Props Information

NameTypeDefaultDescription
title*stringIts a prop related to TimelineList and used to set the title for the timeline, its a required prop.
darkboolfalseIts a prop related to TimelineList and used to switch between light and dark mode of the timeline.
children*nodeIts a prop related to TimelineList and used to pass node or content inside the TimelineList, its a required prop.
color'primary''secondary''info''success''warning''error''dark''light'infoIts a prop related to TimelineItem and used to set the TimelineItem color.
icon*nodeIts a prop related to TimelineItem and used to set the TimelineItem icon, its a required prop.
title*stringIts a prop related to TimelineItem and used to set the TimelineItem title, its a required prop.
dateTime*stringIts a prop related to TimelineItem and used to set the TimelineItem date or time, its a required prop.
descriptionstring""Its a prop related to TimelineItem and used to set the TimelineItem description.
badgesarray[]Its a prop related to TimelineItem and used to set the TimelineItem labels.
badgesarray[]Its a prop related to TimelineItem and used to set the TimelineItem labels.
lastItemboolfalseIts a prop related to TimelineItem and used to define the last item of the timeline, its helpful for removing the line when the timeline reaches to its end.

Timeline Item

You can use the TimelineItem component without the TimelineList as well.

// Vision UI Dashboard React examples import TimelineItem from "examples/Timeline/TimelineItem";
Server payments for April
21 DEC 9:34 PM
People care about how you see the world, how you think, what motivates you, what you’re struggling with or afraid of.
server
payments
Contents