title | description | navigation | github | prev | next | ||||
---|---|---|---|---|---|---|---|---|---|
Tailwind CSS Timeline for React - Material Tailwind |
Customise your web projects with our timeline component for Tailwind CSS and React using Material Design guidelines. |
|
timeline |
textarea |
tooltip |
Use our Tailwind CSS Timeline
component in your web projects. The Timeline
can be used for displaying a list of events in order.
See below our beautiful Timeline
example that you can use in your Tailwind CSS and React project. The example also comes in different styles and colors so you can adapt it easily to your needs.
Examples on this page are using @heroicons/react
make sure you have installed it.
npm i @heroicons/react
<CodePreview component={<TimelineExamples.DefaultTimeline />}>
import {
Timeline,
TimelineItem,
TimelineConnector,
TimelineHeader,
TimelineIcon,
TimelineBody,
Typography,
} from "@material-tailwind/react";
export function DefaultTimeline() {
return (
<div className="w-[32rem]">
<Timeline>
<TimelineItem>
<TimelineConnector />
<TimelineHeader className="h-3">
<TimelineIcon />
<Typography variant="h6" color="blue-gray" className="leading-none">
Timeline Title Here.
</Typography>
</TimelineHeader>
<TimelineBody className="pb-8">
<Typography variant="small" color="gary" className="font-normal text-gray-600">
The key to more success is to have a lot of pillows. Put it this way, it took me
twenty five years to get these plants, twenty five years of blood sweat and tears, and
I'm never giving up, I'm just getting started. I'm up to something. Fan
luv.
</Typography>
</TimelineBody>
</TimelineItem>
<TimelineItem>
<TimelineConnector />
<TimelineHeader className="h-3">
<TimelineIcon />
<Typography variant="h6" color="blue-gray" className="leading-none">
Timeline Title Here.
</Typography>
</TimelineHeader>
<TimelineBody className="pb-8">
<Typography variant="small" color="gary" className="font-normal text-gray-600">
The key to more success is to have a lot of pillows. Put it this way, it took me
twenty five years to get these plants, twenty five years of blood sweat and tears, and
I'm never giving up, I'm just getting started. I'm up to something. Fan
luv.
</Typography>
</TimelineBody>
</TimelineItem>
<TimelineItem>
<TimelineHeader className="h-3">
<TimelineIcon />
<Typography variant="h6" color="blue-gray" className="leading-none">
Timeline Title Here.
</Typography>
</TimelineHeader>
<TimelineBody>
<Typography variant="small" color="gary" className="font-normal text-gray-600">
The key to more success is to have a lot of pillows. Put it this way, it took me
twenty five years to get these plants, twenty five years of blood sweat and tears, and
I'm never giving up, I'm just getting started. I'm up to something. Fan
luv.
</Typography>
</TimelineBody>
</TimelineItem>
</Timeline>
</div>
);
}
## Timeline with Icon
Use the example below for a Timeline
component with icon.
<CodePreview id="timeline-with-icon" component={<TimelineExamples.TimelineWithIcon />}>
import {
Timeline,
TimelineItem,
TimelineConnector,
TimelineHeader,
TimelineIcon,
TimelineBody,
Typography,
} from "@material-tailwind/react";
import { HomeIcon, BellIcon, CurrencyDollarIcon } from "@heroicons/react/24/solid";
export function TimelineWithIcon() {
return (
<div className="w-[32rem]">
<Timeline>
<TimelineItem>
<TimelineConnector />
<TimelineHeader>
<TimelineIcon className="p-2">
<HomeIcon className="h-4 w-4" />
</TimelineIcon>
<Typography variant="h5" color="blue-gray">
Timeline Title Here.
</Typography>
</TimelineHeader>
<TimelineBody className="pb-8">
<Typography color="gary" className="font-normal text-gray-600">
The key to more success is to have a lot of pillows. Put it this way, it took me
twenty five years to get these plants, twenty five years of blood sweat and tears, and
I'm never giving up, I'm just getting started. I'm up to something. Fan
luv.
</Typography>
</TimelineBody>
</TimelineItem>
<TimelineItem>
<TimelineConnector />
<TimelineHeader>
<TimelineIcon className="p-2">
<BellIcon className="h-4 w-4" />
</TimelineIcon>
<Typography variant="h5" color="blue-gray">
Timeline Title Here.
</Typography>
</TimelineHeader>
<TimelineBody className="pb-8">
<Typography color="gary" className="font-normal text-gray-600">
The key to more success is to have a lot of pillows. Put it this way, it took me
twenty five years to get these plants, twenty five years of blood sweat and tears, and
I'm never giving up, I'm just getting started. I'm up to something. Fan
luv.
</Typography>
</TimelineBody>
</TimelineItem>
<TimelineItem>
<TimelineHeader>
<TimelineIcon className="p-2">
<CurrencyDollarIcon className="h-4 w-4" />
</TimelineIcon>
<Typography variant="h5" color="blue-gray">
Timeline Title Here.
</Typography>
</TimelineHeader>
<TimelineBody>
<Typography color="gary" className="font-normal text-gray-600">
The key to more success is to have a lot of pillows. Put it this way, it took me
twenty five years to get these plants, twenty five years of blood sweat and tears, and
I'm never giving up, I'm just getting started. I'm up to something. Fan
luv.
</Typography>
</TimelineBody>
</TimelineItem>
</Timeline>
</div>
);
}
## Timeline with Avatar
Use the example below for a Timeline
component with avatar.
<CodePreview id="timeline-with-avatar" component={<TimelineExamples.TimelineWithAvatar />}>
import {
Timeline,
TimelineItem,
TimelineConnector,
TimelineHeader,
TimelineIcon,
TimelineBody,
Typography,
Avatar,
} from "@material-tailwind/react";
export function TimelineWithAvatar() {
return (
<div className="w-[32rem]">
<Timeline>
<TimelineItem>
<TimelineConnector />
<TimelineHeader>
<TimelineIcon className="p-0">
<Avatar size="sm" src="https://docs.material-tailwind.com/img/team-1.jpg" alt="user 1" withBorder />
</TimelineIcon>
<Typography variant="h5" color="blue-gray">
Timeline Title Here.
</Typography>
</TimelineHeader>
<TimelineBody className="pb-8">
<Typography color="gary" className="font-normal text-gray-600">
The key to more success is to have a lot of pillows. Put it this way, it took me
twenty five years to get these plants, twenty five years of blood sweat and tears, and
I'm never giving up, I'm just getting started. I'm up to something. Fan
luv.
</Typography>
</TimelineBody>
</TimelineItem>
<TimelineItem>
<TimelineConnector />
<TimelineHeader>
<TimelineIcon className="p-0">
<Avatar size="sm" src="https://docs.material-tailwind.com/img/team-2.jpg" alt="user 2" withBorder />
</TimelineIcon>
<Typography variant="h5" color="blue-gray">
Timeline Title Here.
</Typography>
</TimelineHeader>
<TimelineBody className="pb-8">
<Typography color="gary" className="font-normal text-gray-600">
The key to more success is to have a lot of pillows. Put it this way, it took me
twenty five years to get these plants, twenty five years of blood sweat and tears, and
I'm never giving up, I'm just getting started. I'm up to something. Fan
luv.
</Typography>
</TimelineBody>
</TimelineItem>
<TimelineItem>
<TimelineHeader>
<TimelineIcon className="p-0">
<Avatar size="sm" src="https://docs.material-tailwind.com/img/team-3.jpg" alt="user 3" withBorder />
</TimelineIcon>
<Typography variant="h5" color="blue-gray">
Timeline Title Here.
</Typography>
</TimelineHeader>
<TimelineBody>
<Typography color="gary" className="font-normal text-gray-600">
The key to more success is to have a lot of pillows. Put it this way, it took me
twenty five years to get these plants, twenty five years of blood sweat and tears, and
I'm never giving up, I'm just getting started. I'm up to something. Fan
luv.
</Typography>
</TimelineBody>
</TimelineItem>
</Timeline>
</div>
);
}
## Activities Timeline
Use the example below for a Timeline
component with activities.
<CodePreview id="activities-timeline" component={<TimelineExamples.ActivitiesTimeline />}>
import {
Timeline,
TimelineItem,
TimelineConnector,
TimelineIcon,
Typography,
TimelineHeader,
} from "@material-tailwind/react";
import {
BellIcon,
ArchiveBoxIcon,
CurrencyDollarIcon,
} from "@heroicons/react/24/solid";
export function ActivitiesTimeline() {
return (
<div className="w-[25rem]">
<Timeline>
<TimelineItem className="h-28">
<TimelineConnector className="!w-[78px]" />
<TimelineHeader className="relative rounded-xl border border-blue-gray-50 bg-white py-3 pl-4 pr-8 shadow-lg shadow-blue-gray-900/5">
<TimelineIcon className="p-3" variant="ghost">
<BellIcon className="h-5 w-5" />
</TimelineIcon>
<div className="flex flex-col gap-1">
<Typography variant="h6" color="blue-gray">
$2400, Design changes
</Typography>
<Typography variant="small" color="gray" className="font-normal">
22 DEC 7:20 PM
</Typography>
</div>
</TimelineHeader>
</TimelineItem>
<TimelineItem className="h-28">
<TimelineConnector className="!w-[78px]" />
<TimelineHeader className="relative rounded-xl border border-blue-gray-50 bg-white py-3 pl-4 pr-8 shadow-lg shadow-blue-gray-900/5">
<TimelineIcon className="p-3" variant="ghost" color="red">
<ArchiveBoxIcon className="h-5 w-5" />
</TimelineIcon>
<div className="flex flex-col gap-1">
<Typography variant="h6" color="blue-gray">
New order #1832412
</Typography>
<Typography variant="small" color="gray" className="font-normal">
21 DEC 11 PM
</Typography>
</div>
</TimelineHeader>
</TimelineItem>
<TimelineItem className="h-28">
<TimelineHeader className="relative rounded-xl border border-blue-gray-50 bg-white py-3 pl-4 pr-8 shadow-lg shadow-blue-gray-900/5">
<TimelineIcon className="p-3" variant="ghost" color="green">
<CurrencyDollarIcon className="h-5 w-5" />
</TimelineIcon>
<div className="flex flex-col gap-1">
<Typography variant="h6" color="blue-gray">
Payment completed for order #4395133
</Typography>
<Typography variant="small" color="gray" className="font-normal">
20 DEC 2:20 AM
</Typography>
</div>
</TimelineHeader>
</TimelineItem>
</Timeline>
</div>
);
}