Store

For Enterprise

The v-timeline is useful for stylistically displaying chronological information.

v-timeline's in their simplest form display a vertical timeline that should contain at least one v-timeline-item.

Select your desired component from below and see the available props, slots, events and functions.

Below is a collection of simple to complex examples.

The small prop allows alternate styles to provide a unique design.

Conditionally use icons within the v-timeline-item's dot to provide additional context.

You can reverse the direction of the timeline items by using the reverse prop. This works both in default and dense mode.

If you place a v-card inside of a v-timeline-item, a caret will appear on the side of the card.

dense timelines position all content to the right. In this example, v-alert replaces the card to provide a different design.

The opposite slot provides an additional layer of customization within your timelines.

Insert avatars into dots with use of the icon slot and v-avatar.

Colored dots create visual breakpoints that make your timelines easier to read.

Modular components allow you to create highly customized solutions that just work.

Ready for more? Continue reading with:

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!