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

// NextJS Material Dashboard 2 Examples import TimelineList from "/examples/Timeline/TimelineList"; import TimelineItem from "/examples/Timeline/TimelineItem";

$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.

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.

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.

Props Information

Name	Type	Default	Description
title*	string		Its a prop related to `TimelineList` and used to set the title for the timeline, its a required prop.
dark	bool	false	Its a prop related to `TimelineList` and used to switch between light and dark mode of the timeline.
children*	node		Its 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'	dark	Its a prop related to `TimelineItem` and used to set the `TimelineItem` color.
icon*	node		Its a prop related to `TimelineItem` and used to set the `TimelineItem` icon, its a required prop.
title*	string		Its a prop related to `TimelineItem` and used to set the `TimelineItem` title, its a required prop.
dateTime*	string		Its a prop related to `TimelineItem` and used to set the `TimelineItem` date or time, its a required prop.
description	string	""	Its a prop related to `TimelineItem` and used to set the `TimelineItem` description.
badges	array	[]	Its a prop related to `TimelineItem` and used to set the `TimelineItem` labels.
badges	array	[]	Its a prop related to `TimelineItem` and used to set the `TimelineItem` labels.
lastItem	bool	false	Its 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.

// NextJS Material Dashboard 2 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.