feat(Timeline): new component

[J-Michalek]

🔗 Linked issue

Resolves: #814

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

I've added the Timeline component. Can be used to display the current progress of several steps.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[benjamincanac]

@J-Michalek I've made a few changes, let me know what you think! Basically I updated the design, removed unnecessary divs, used Avatar component for the indicator since it supports icon already.

We can start the docs if it's ok right after 😊

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@4215

commit: 552d124

[J-Michalek]

@benjamincanac Looks great! Good job on cleaning it up. For the docs I think we can take inspiration from Stepper omitting the disabled part: https://ui.nuxt.com/components/stepper#disabled

As for the example section, we should do https://ui.nuxt.com/components/stepper#control-active-item and https://ui.nuxt.com/components/stepper#with-custom-slot

I also think an example for something more complex like this #814 (comment) or #814 (comment) would be great.

Can I start on the docs or would you like to take it from here?

[benjamincanac]

Sure! As you wish, just let me know if you want me to do it 😊

[J-Michalek]

Alright I will get started on it.

[benjamincanac]

I've updated the design a bit again to support all sizes from the Avatar component.

I experimented to reproduce Origin UI basic design, here's the config needed:

<UTimeline size="3xs" color="neutral" :ui="{ indicator: 'bg-default ring-2 ring-inset ring-accented group-data-[state=completed]:ring-inverted group-data-[state=completed]:bg-default group-data-[state=active]:ring-inverted group-data-[state=active]:bg-default' }" />

[benjamincanac]

Here's a config to achieve alternate timeline:

<UTimeline
  :ui="{ item: 'even:flex-row-reverse even:-translate-x-[calc(100%-2rem)] even:text-right' }"
/>

[benjamincanac]

Here's another example to make a Volta like timeline:

<script lang="ts" setup>
import { useTimeAgo } from '@vueuse/core'
import type { TimelineItem } from '@nuxt/ui'

const items = [{
  username: 'J-Michalek',
  date: '2025-05-24T14:58:55Z',
  action: 'opened this',
  avatar: {
    src: 'https://github.com/J-Michalek.png'
  }
}, {
  username: 'J-Michalek',
  date: '2025-05-26T19:30:14+02:00',
  action: 'marked this pull request as ready for review',
  icon: 'i-lucide-check-circle'
}, {
  username: 'benjamincanac',
  date: '2025-05-27T11:01:20Z',
  action: 'commented on this',
  description: 'I\'ve made a few changes, let me know what you think! Basically I updated the design, removed unnecessary divs, used Avatar component for the indicator since it supports icon already.',
  avatar: {
    src: 'https://github.com/benjamincanac.png'
  }
}, {
  username: 'J-Michalek',
  date: '2025-05-27T11:01:20Z',
  action: 'commented on this',
  description: 'Looks great! Good job on cleaning it up.',
  avatar: {
    src: 'https://github.com/J-Michalek.png'
  }
}, {
  username: 'benjamincanac',
  date: '2025-05-27T11:01:20Z',
  action: 'merged this',
  icon: 'i-lucide-git-merge'
}] satisfies TimelineItem[]
</script>

<template>
  <UTimeline
    :items="items"
    size="xs"
    class="w-96"
    :ui="{
      date: 'float-end ms-1',
      description: 'px-3 py-2 ring ring-default mt-2 rounded-md text-default'
    }"
  >
    <template #title="{ item }">
      <span>{{ item.username }}</span>
      <span class="font-normal text-muted">&nbsp;{{ item.action }}</span>
    </template>

    <template #date="{ item }">
      {{ useTimeAgo(new Date(item.date)) }}
    </template>
  </UTimeline>
</template>

[J-Michalek]

Wow loving these! Will get to the docs tomorrow.

[J-Michalek]

@benjamincanac I've added the docs but it definitely needs some finishing touches. Please check the texts and headings as I was not too sure about how I should call them properly. Perhaps the example is a little too long but I'll leave it to your judgement:

I have also taken the examples you have provided here including the one with my avatar, just a heads up that its there (I don't mind if you don't).

[benjamincanac]

Thanks! I'll finish this up in the next days then.

Haha don't worry I made the example with your avatar on purpose since you made the PR 😊

[benjamincanac]

Thanks @J-Michalek! 😊