Skip to main content

Timeline

Please refer to MUI's official docs for more details on component's usage guide and API documentation.

Timeline Filled

  • 12 Invoices have been paid

    12 min ago

    Invoices have been paid to the company

    invoice.pdf

    invoices.pdf

  • Client Meeting

    45 min ago

    Project meeting with john @10:15am

    Lester McCarthy (Client)

    CEO of ThemeSelection

  • Create a new project for client

    2 Day Ago

    6 team members in a project

    +3
    John Doe
    Agnes Walker
    Travis Howard
// MUI Imports
import Avatar from '@mui/material/Avatar'
import AvatarGroup from '@mui/material/AvatarGroup'
import { styled } from '@mui/material/styles'
import TimelineDot from '@mui/lab/TimelineDot'
import TimelineItem from '@mui/lab/TimelineItem'
import Typography from '@mui/material/Typography'
import TimelineContent from '@mui/lab/TimelineContent'
import TimelineSeparator from '@mui/lab/TimelineSeparator'
import TimelineConnector from '@mui/lab/TimelineConnector'
import MuiTimeline from '@mui/lab/Timeline'
import type { TimelineProps } from '@mui/lab/Timeline'

// Styled Timeline component
const Timeline = styled(MuiTimeline)<TimelineProps>({
  '& .MuiTimelineItem-root': {
    width: '100%',
    '&:before': {
      display: 'none'
    }
  }
})

const TimelineFilled = () => {
  return (
    <Timeline>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot color='primary' />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>
          <div className='flex flex-wrap items-center justify-between gap-x-2 mbe-2.5'>
            <Typography color='text.primary' className='font-medium'>
              12 Invoices have been paid
            </Typography>
            <Typography variant='caption'>12 min ago</Typography>
          </div>
          <Typography className='mbe-2'>Invoices have been paid to the company</Typography>
          <div className='flex items-center gap-2.5 is-fit rounded bg-actionHover plb-[5px] pli-2.5'>
            <img height={20} alt='invoice.pdf' src='/images/icons/pdf-document.png' />
            <Typography className='font-medium'>invoices.pdf</Typography>
          </div>
        </TimelineContent>
      </TimelineItem>

      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot color='success' />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>
          <div className='flex flex-wrap items-center justify-between gap-x-2 mbe-2.5'>
            <Typography color='text.primary' className='font-medium'>
              Client Meeting
            </Typography>
            <Typography variant='caption'>45 min ago</Typography>
          </div>
          <Typography className='mbe-2'>Project meeting with john @10:15am</Typography>
          <div className='flex items-center gap-2.5'>
            <Avatar src='/images/avatars/1.png' className='is-8 bs-8' />
            <div className='flex flex-col flex-wrap'>
              <Typography variant='body2' className='font-medium'>
                Lester McCarthy (Client)
              </Typography>
              <Typography variant='body2'>CEO of ThemeSelection</Typography>
            </div>
          </div>
        </TimelineContent>
      </TimelineItem>

      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot color='info' />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>
          <div className='flex flex-wrap items-center justify-between gap-x-2 mbe-2.5'>
            <Typography color='text.primary' className='font-medium'>
              Create a new project for client
            </Typography>
            <Typography variant='caption'>2 Day Ago</Typography>
          </div>
          <Typography className='mbe-2'>6 team members in a project</Typography>
          <AvatarGroup total={6} className='pull-up'>
            <Avatar alt='Travis Howard' src='/images/avatars/1.png' />
            <Avatar alt='Agnes Walker' src='/images/avatars/8.png' />
            <Avatar alt='John Doe' src='/images/avatars/2.png' />
          </AvatarGroup>
        </TimelineContent>
      </TimelineItem>
    </Timeline>
  )
}

export default TimelineFilled
Timeline Outlined

  • 12 Invoices have been paid

    12 min ago

    Invoices have been paid to the company

    invoice.pdf

    invoices.pdf

  • Client Meeting

    45 min ago

    Project meeting with john @10:15am

    Lester McCarthy (Client)

    CEO of ThemeSelection

  • Create a new project for client

    2 Day Ago

    6 team members in a project

    +3
    John Doe
    Agnes Walker
    Travis Howard
// MUI Imports
import Avatar from '@mui/material/Avatar'
import AvatarGroup from '@mui/material/AvatarGroup'
import { styled } from '@mui/material/styles'
import TimelineDot from '@mui/lab/TimelineDot'
import TimelineItem from '@mui/lab/TimelineItem'
import Typography from '@mui/material/Typography'
import TimelineContent from '@mui/lab/TimelineContent'
import TimelineSeparator from '@mui/lab/TimelineSeparator'
import TimelineConnector from '@mui/lab/TimelineConnector'
import MuiTimeline from '@mui/lab/Timeline'
import type { TimelineProps } from '@mui/lab/Timeline'

// Styled Timeline component
const Timeline = styled(MuiTimeline)<TimelineProps>({
  '& .MuiTimelineItem-root': {
    width: '100%',
    '&:before': {
      display: 'none'
    }
  }
})

const TimelineOutlined = () => {
  return (
    <Timeline>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot color='primary' variant='outlined' />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>
          <div className='flex flex-wrap items-center justify-between gap-x-2 mbe-2.5'>
            <Typography color='text.primary' className='font-medium'>
              12 Invoices have been paid
            </Typography>
            <Typography variant='caption'>12 min ago</Typography>
          </div>
          <Typography className='mbe-2'>Invoices have been paid to the company</Typography>
          <div className='flex items-center gap-2.5 is-fit rounded bg-actionHover plb-[5px] pli-2.5'>
            <img height={20} alt='invoice.pdf' src='/images/icons/pdf-document.png' />
            <Typography className='font-medium'>invoices.pdf</Typography>
          </div>
        </TimelineContent>
      </TimelineItem>

      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot color='success' variant='outlined' />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>
          <div className='flex flex-wrap items-center justify-between gap-x-2 mbe-2.5'>
            <Typography color='text.primary' className='font-medium'>
              Client Meeting
            </Typography>
            <Typography variant='caption'>45 min ago</Typography>
          </div>
          <Typography className='mbe-2'>Project meeting with john @10:15am</Typography>
          <div className='flex items-center gap-2.5'>
            <Avatar src='/images/avatars/1.png' className='is-8 bs-8' />
            <div className='flex flex-col flex-wrap'>
              <Typography variant='body2' className='font-medium'>
                Lester McCarthy (Client)
              </Typography>
              <Typography variant='body2'>CEO of ThemeSelection</Typography>
            </div>
          </div>
        </TimelineContent>
      </TimelineItem>

      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot color='info' variant='outlined' />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>
          <div className='flex flex-wrap items-center justify-between gap-x-2 mbe-2.5'>
            <Typography color='text.primary' className='font-medium'>
              Create a new project for client
            </Typography>
            <Typography variant='caption'>2 Day Ago</Typography>
          </div>
          <Typography className='mbe-2'>6 team members in a project</Typography>
          <AvatarGroup total={6} className='pull-up'>
            <Avatar alt='Travis Howard' src='/images/avatars/1.png' />
            <Avatar alt='Agnes Walker' src='/images/avatars/8.png' />
            <Avatar alt='John Doe' src='/images/avatars/2.png' />
          </AvatarGroup>
        </TimelineContent>
      </TimelineItem>
    </Timeline>
  )
}

export default TimelineOutlined
Timeline Center With Icons
  • 2 months ago
    You've uploaded doc pdf to the ThemeSelection project

    The process of recording the key project details and producing the documents that are required to implement it successfully. Simply put, it's an umbrella term which includes all the documents created over the course of the project.

    documentation.pdf

    documentation.pdf

  • 24 days ago
    Heather added 4 images to the Team album

    In the Select Image for Project dialog box, choose one of the following: Under the Upload New Image section

    documentation.pdfdocumentation.pdfdocumentation.pdfdocumentation.pdf
  • 6 days ago
    Loretta write a review on ThemeSelection

    Loretta Moore

    CTO of Airbnb

    user
    Verified Buyer

    I wish I could select more than one main reason for rating this. I love how they constantly work on to make the template better. I am so thankful for this. Also, in the past, they had responded well to my tickets. Thank you for this great theme, for such an amazing support, for the better updates. I wish I could rate this for so many times. I highly recommend this template!

  • 2 days ago
    Julia stiles shared an earnings report

    $24,895

    10%

    Compared to $84,325 last year

    Zipcar

    Zipcar

    Vuejs, React & HTML

    $24895.65

    Bitbank

    Bitbank

    Sketch, Figma & XD

    $86500.2

    Aviato

    Aviato

    HTML & Anguler

    $12450.8

  • 2 days ago
    Josh Johnson shared Next js project progress report

    The structure and process are defined in the project organization considering the attainment of the corporate objectives and therefore also project objectives. The components of the project process are

    progress-report.xls.pdf

    progress-report.xls

    34%

// React Imports
import { ReactNode } from 'react'

// MUI Imports
import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
import Typography from '@mui/material/Typography'
import Avatar from '@mui/material/Avatar'
import Rating from '@mui/material/Rating'
import Chip from '@mui/material/Chip'
import { styled, useTheme } from '@mui/material/styles'
import MuiTimeline from '@mui/lab/Timeline'
import TimelineDot from '@mui/lab/TimelineDot'
import TimelineItem from '@mui/lab/TimelineItem'
import TimelineContent from '@mui/lab/TimelineContent'
import TimelineSeparator from '@mui/lab/TimelineSeparator'
import TimelineConnector from '@mui/lab/TimelineConnector'
import TimelineOppositeContent from '@mui/lab/TimelineOppositeContent'
import LinearProgress from '@mui/material/LinearProgress'
import useMediaQuery from '@mui/material/useMediaQuery'
import type { TimelineProps } from '@mui/lab/Timeline'

// Type Imports
import type { ThemeColor } from '@core/types'

type DataProps = {
  image: string
  title: string
  subtitle: string
  progress: number
  progressColor: ThemeColor
}

// Styled Timeline component
const Timeline = styled(MuiTimeline)<TimelineProps>(({ theme }) => ({
  '& .MuiTimelineItem-root:nth-of-type(even) .MuiTimelineContent-root': {
    textAlign: 'left'
  },
  [theme.breakpoints.down('md')]: {
    '& .MuiTimelineItem-root': {
      width: '100%',
      '&:before': {
        display: 'none'
      }
    }
  }
}))

const ImageList = [
  '/images/misc/plant-1.png',
  '/images/misc/plant-2.png',
  '/images/misc/plant-3.png',
  '/images/misc/plant-4.png'
]

const Data: DataProps[] = [
  {
    image: '/images/misc/zipcar.png',
    title: 'Zipcar',
    subtitle: 'Vuejs, React & HTML',
    progress: 24895.65,
    progressColor: 'primary'
  },
  {
    image: '/images/misc/bitbank.png',
    title: 'Bitbank',
    subtitle: 'Sketch, Figma & XD',
    progress: 86500.2,
    progressColor: 'info'
  },
  {
    image: '/images/misc/aviato.png',
    title: 'Aviato',
    subtitle: 'HTML & Anguler',
    progress: 12450.8,
    progressColor: 'secondary'
  }
]

const TimelineCenter = () => {
  // Hooks
  const theme = useTheme()
  const isBelowMdScreen = useMediaQuery(theme.breakpoints.down('md'))

  return (
    <Timeline position={isBelowMdScreen ? 'right' : 'alternate'}>
      <TimelineItem>
        {/* We have used the following code twice because we want to show the data on the
        opposite side of the timeline on large screens and on the right side of the timeline
        on small screens. You may create components for this and use them instead. */}
        {/* <Typography variant='caption' component='div' className='mbs-3'>
          2 months ago
        </Typography> */}
        {!isBelowMdScreen && (
          <TimelineOppositeContent>
            <Typography variant='caption' component='div' className='mbs-3'>
              2 months ago
            </Typography>
          </TimelineOppositeContent>
        )}
        <TimelineSeparator>
          <TimelineDot color='error' variant='tonal'>
            <i className='bx-file-blank text-xl' />
          </TimelineDot>
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>
          {isBelowMdScreen && (
            <Typography variant='caption' component='div' className='mbs-3'>
              2 months ago
            </Typography>
          )}
          <Card>
            <CardContent>
              <Typography variant='h5' className='mbe-4'>
                You've uploaded doc pdf to the ThemeSelection project
              </Typography>
              <Typography className='mbe-3'>
                The process of recording the key project details and producing the documents that are required to
                implement it successfully. Simply put, it's an umbrella term which includes all the documents created
                over the course of the project.
              </Typography>
              <div className='flex items-center gap-2.5 is-fit rounded bg-actionHover plb-[5px] pli-2.5'>
                <img height={20} alt='documentation.pdf' src='/images/icons/pdf-document.png' />
                <Typography className='font-medium'>documentation.pdf</Typography>
              </div>
            </CardContent>
          </Card>
        </TimelineContent>
      </TimelineItem>

      <TimelineItem>
        {!isBelowMdScreen && (
          <TimelineOppositeContent>
            <Typography variant='caption' component='div' className='mbs-3'>
              24 days ago
            </Typography>
          </TimelineOppositeContent>
        )}
        <TimelineSeparator>
          <TimelineDot color='success' variant='tonal'>
            <i className='bx-image-alt' />
          </TimelineDot>
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>
          {isBelowMdScreen && (
            <Typography variant='caption' component='div' className='mbs-3'>
              24 days ago
            </Typography>
          )}
          <Card>
            <CardContent>
              <Typography variant='h5' className='mbe-4'>
                Heather added 4 images to the Team album
              </Typography>
              <Typography className='mbe-3'>
                In the Select Image for Project dialog box, choose one of the following: Under the Upload New Image
                section
              </Typography>
              <div className='flex gap-4 flex-wrap'>
                {ImageList.map((image, index) => (
                  <img key={index} className='rounded' height={114} alt='documentation.pdf' src={image} />
                ))}
              </div>
            </CardContent>
          </Card>
        </TimelineContent>
      </TimelineItem>

      <TimelineItem>
        {!isBelowMdScreen && (
          <TimelineOppositeContent>
            <Typography variant='caption' component='div' className='mbs-3'>
              6 days ago
            </Typography>
          </TimelineOppositeContent>
        )}
        <TimelineSeparator>
          <TimelineDot color='warning' variant='tonal'>
            <i className='bx-star' />
          </TimelineDot>
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>
          {isBelowMdScreen && (
            <Typography variant='caption' component='div' className='mbs-3'>
              6 days ago
            </Typography>
          )}
          <Card>
            <CardContent>
              <Typography variant='h5' className='mbe-4'>
                Loretta write a review on ThemeSelection
              </Typography>
              <div className='flex items-center gap-4 mbe-3'>
                <Avatar src='/images/avatars/2.png' />
                <div className='flex flex-col flex-wrap'>
                  <Typography color='text.primary' className='font-medium'>
                    Loretta Moore
                  </Typography>
                  <Typography variant='body2'>CTO of Airbnb</Typography>
                </div>
              </div>
              <div className='flex justify-between items-center mbe-3 flex-wrap'>
                <Rating name='read-only' value={5} readOnly />
                <Chip
                  size='small'
                  variant='tonal'
                  className='uppercase'
                  color='success'
                  label='Verified Buyer'
                  avatar={<Avatar alt='user' src='/images/avatars/2.png' className='!is-4 !bs-4' />}
                />
              </div>
              <Typography>
                I wish I could select more than one main reason for rating this. I love how they constantly work on to
                make the template better. I am so thankful for this. Also, in the past, they had responded well to my
                tickets. Thank you for this great theme, for such an amazing support, for the better updates. I wish I
                could rate this for so many times. I highly recommend this template!
              </Typography>
            </CardContent>
          </Card>
        </TimelineContent>
      </TimelineItem>

      <TimelineItem>
        {!isBelowMdScreen && (
          <TimelineOppositeContent>
            <Typography variant='caption' component='div' className='mbs-3'>
              2 days ago
            </Typography>
          </TimelineOppositeContent>
        )}
        <TimelineSeparator>
          <TimelineDot color='info' variant='tonal'>
            <i className='bx-pie-chart-alt' />
          </TimelineDot>
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>
          {isBelowMdScreen && (
            <Typography variant='caption' component='div' className='mbs-3'>
              2 days ago
            </Typography>
          )}
          <Card>
            <CardContent>
              <Typography variant='h5' className='mbe-4'>
                Julia stiles shared an earnings report
              </Typography>
              <div className='flex items-center gap-0.5 mbe-0.5'>
                <Typography variant='h4'>$24,895</Typography>
                <i className='bx-caret-up text-success' />
                <Typography variant='body2' color='success.main' className='font-medium'>
                  10%
                </Typography>
              </div>
              <Typography variant='body2' className='mbe-3'>
                Compared to $84,325 last year
              </Typography>
              {Data.map((item, index) => (
                <div key={index} className='flex justify-between items-center gap-3 mbe-3 last:m-0'>
                  <div className='flex items-center gap-3'>
                    <img src={item.image} width={40} height={40} alt={item.title} />
                    <div className='flex flex-col flex-wrap gap-0.5'>
                      <Typography color='text.primary' className='font-medium'>
                        {item.title}
                      </Typography>
                      <Typography variant='body2'>{item.subtitle}</Typography>
                    </div>
                  </div>
                  <div className='flex flex-col items-center gap-2'>
                    <Typography color='text.primary' className='font-medium'>
                      ${item.progress}
                    </Typography>
                    <LinearProgress
                      variant='determinate'
                      value={75}
                      color={item.progressColor}
                      className='is-20 max-bs-1'
                    />
                  </div>
                </div>
              ))}
            </CardContent>
          </Card>
        </TimelineContent>
      </TimelineItem>

      <TimelineItem>
        {!isBelowMdScreen && (
          <TimelineOppositeContent>
            <Typography variant='caption' component='div' className='mbs-3'>
              2 days ago
            </Typography>
          </TimelineOppositeContent>
        )}
        <TimelineSeparator>
          <TimelineDot color='primary' variant='tonal'>
            <i className='bx-folder' />
          </TimelineDot>
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>
          {isBelowMdScreen && (
            <Typography variant='caption' component='div' className='mbs-3'>
              2 days ago
            </Typography>
          )}
          <Card>
            <CardContent>
              <Typography variant='h5' className='mbe-4'>
                Josh Johnson shared Next js project progress report
              </Typography>
              <Typography className='mbe-3'>
                The structure and process are defined in the project organization considering the attainment of the
                corporate objectives and therefore also project objectives. The components of the project process are
              </Typography>
              <div className='mbe-3 flex items-center gap-2.5 is-fit rounded bg-actionHover plb-[5px] pli-2.5'>
                <img height={20} alt='progress-report.xls.pdf' src='/images/icons/xls-document.png' />
                <Typography className='font-medium'>progress-report.xls</Typography>
              </div>
              <div className='flex items-center gap-2'>
                <LinearProgress variant='determinate' value={34} className='is-full' />
                <Typography variant='body2' className='font-medium'>
                  34%
                </Typography>
              </div>
            </CardContent>
          </Card>
        </TimelineContent>
      </TimelineItem>
    </Timeline>
  )
}

export default TimelineCenter