Timeline

A component for displaying a chronological sequence of events, with dates, titles, and supporting icons or avatars.

Use the Timeline component to display a list of items in a timeline.

Mar 15, 2025

Project Kickoff

Kicked off the project with team alignment. Set up project milestones and allocated resources.

Mar 22 2025

Design Phase

User research and design workshops. Created wireframes and prototypes for user testing.

Mar 29 2025

Development Sprint

Frontend and backend development. Implemented core features and integrated with APIs.

Apr 5 2025

Testing & Deployment

QA testing and performance optimization. Deployed the application to production.

{
  "wait": "Loading client-side content..."
}

Items

Use the items prop as an array of objects with the following properties:

date?: string
title?: string
description?: AvatarProps
icon?: IconComponent
avatar?: AvatarProps
value?: string | number
slot?: string
class?: any
b24ui?: { item?: ClassNameValue, container?: ClassNameValue, indicator?: ClassNameValue, separator?: ClassNameValue, wrapper?: ClassNameValue, date?: ClassNameValue, title?: ClassNameValue, description?: ClassNameValue }

Mar 15, 2025

Project Kickoff

Kicked off the project with team alignment. Set up project milestones and allocated resources.

Mar 22 2025

Design Phase

User research and design workshops. Created wireframes and prototypes for user testing.

Mar 29 2025

Development Sprint

Frontend and backend development. Implemented core features and integrated with APIs.

Apr 5 2025

Testing & Deployment

QA testing and performance optimization. Deployed the application to production.

{
  "wait": "Loading client-side content..."
}

Color

Use the color prop to change the color of the active items in a Timeline.

color

Mar 15, 2025

Project Kickoff

Kicked off the project with team alignment. Set up project milestones and allocated resources.

Mar 22 2025

Design Phase

User research and design workshops. Created wireframes and prototypes for user testing.

Mar 29 2025

Development Sprint

Frontend and backend development. Implemented core features and integrated with APIs.

Apr 5 2025

Testing & Deployment

QA testing and performance optimization. Deployed the application to production.

{
  "wait": "Loading client-side content..."
}

Size

Use the size prop to change the size of the Timeline.

size

Mar 15, 2025

Project Kickoff

Kicked off the project with team alignment. Set up project milestones and allocated resources.

Mar 22 2025

Design Phase

User research and design workshops. Created wireframes and prototypes for user testing.

Mar 29 2025

Development Sprint

Frontend and backend development. Implemented core features and integrated with APIs.

Apr 5 2025

Testing & Deployment

QA testing and performance optimization. Deployed the application to production.

{
  "wait": "Loading client-side content..."
}

Orientation

Use the orientation prop to change the orientation of the Timeline. Defaults to vertical.

orientation

Mar 15, 2025

Project Kickoff

Kicked off the project with team alignment.

Mar 22 2025

Design Phase

User research and design workshops.

Mar 29 2025

Development Sprint

Frontend and backend development.

Apr 5 2025

Testing & Deployment

QA testing and performance optimization.

{
  "wait": "Loading client-side content..."
}

Reverse

Use the reverse prop to reverse the direction of the Timeline.

reverse

modelValue

orientation

Mar 15, 2025

Project Kickoff

Kicked off the project with team alignment.

Mar 22 2025

Design Phase

User research and design workshops.

Mar 29 2025

Development Sprint

Frontend and backend development.

Apr 5 2025

Testing & Deployment

QA testing and performance optimization.

{
  "wait": "Loading client-side content..."
}

Examples

Control active item

You can control the active item by using the default-value prop or the v-model directive with the value of the item. If no value is provided, it defaults to the index.

Mar 15, 2025

Project Kickoff

Kicked off the project with team alignment. Set up project milestones and allocated resources.

Mar 22, 2025

Design Phase

User research and design workshops. Created wireframes and prototypes for user testing.

Mar 29, 2025

Development Sprint

Frontend and backend development. Implemented core features and integrated with APIs.

Apr 5, 2025

Testing & Deployment

QA testing and performance optimization. Deployed the application to production.

{
  "wait": "Loading client-side content..."
}

With alternating layout

Use the b24ui prop to create a Timeline with alternating layout.

Mar 15, 2025

Project Kickoff

Mar 22, 2025

Design Phase

Mar 29, 2025

Development Sprint

Apr 5, 2025

Testing & Deployment

{
  "wait": "Loading client-side content..."
}

With custom slot

Use the slot property to customize a specific item.

You will have access to the following slots:

#{{ item.slot }}-indicator
#{{ item.slot }}-date
#{{ item.slot }}-title
#{{ item.slot }}-description

Mar 15, 2025

Project Kickoff

Kicked off the project with team alignment. Set up project milestones and allocated resources.

Mar 22, 2025

Design Phase

User research and design workshops. Created wireframes and prototypes for user testing.

Mar 29, 2025

Development Sprint

Frontend and backend development. Implemented core features and integrated with APIs.

Apr 5, 2025

Testing & Deployment

QA testing and performance optimization. Deployed the application to production.

{
  "wait": "Loading client-side content..."
}

With slots

Use the available slots to create a more complex Timeline.

6 months ago

Employee Name opened this

6 months ago

Employee Name marked this pull request as ready for review

6 months ago

Assistant Name commented on this

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.

6 months ago

Employee Name commented on this

Looks great! Good job on cleaning it up.

6 months ago

Assistant Name merged this

{
  "wait": "Loading client-side content..."
}

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`items`		`TimelineItem[]`
`size`	`'md'`	`"3xs" \| "2xs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`
`color`	`'air-primary'`	`"air-primary" \| "air-primary-success" \| "air-primary-alert" \| "air-primary-warning" \| "air-primary-copilot"`
`orientation`	`'vertical'`	`"horizontal" \| "vertical"` The orientation of the Timeline.
`defaultValue`		`string \| number`
`reverse`		`boolean`
`modelValue`		`string \| number`
`b24ui`		`{ root?: ClassNameValue; item?: ClassNameValue; container?: ClassNameValue; indicator?: ClassNameValue; separator?: ClassNameValue; wrapper?: ClassNameValue; date?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; }`

Slots

Slot	Type
`indicator`	`{ item: TimelineItem; }`
`date`	`{ item: TimelineItem; }`
`title`	`{ item: TimelineItem; }`
`description`	`{ item: TimelineItem; }`

Emits

Event	Type
`update:modelValue`	`[value: string \| number \| undefined]`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    timeline: {
      slots: {
        root: 'flex gap-1.5',
        item: 'group relative flex flex-1 gap-3',
        container: 'relative flex items-center gap-1.5',
        indicator: 'group-data-[state=completed]:text-(--b24ui-color) group-data-[state=active]:text-(--b24ui-color) text-(--b24ui-typography-description-color) group-data-[state=completed]:bg-(--b24ui-background) group-data-[state=active]:bg-(--b24ui-background-active)',
        separator: 'flex-1 rounded-(--ui-border-radius-circle) bg-(--ui-color-base-6)',
        wrapper: 'w-full',
        date: 'text-(--b24ui-typography-label-color) text-(length:--ui-font-size-xs)/(--ui-font-line-height-md)',
        title: 'font-(--ui-font-weight-medium) text-(--b24ui-typography-legend-color) text-(length:--ui-font-size-sm)',
        description: 'text-(--b24ui-typography-description-color) text-wrap text-(length:--ui-font-size-sm)'
      },
      variants: {
        orientation: {
          horizontal: {
            root: 'flex-row w-full',
            item: 'flex-col',
            separator: 'h-0.5'
          },
          vertical: {
            root: 'flex-col',
            container: 'flex-col',
            separator: 'w-0.5'
          }
        },
        color: {
          'air-primary': {
            root: 'style-filled'
          },
          'air-primary-success': {
            root: 'style-filled-success'
          },
          'air-primary-alert': {
            root: 'style-filled-alert'
          },
          'air-primary-copilot': {
            root: 'style-filled-copilot'
          },
          'air-primary-warning': {
            root: 'style-filled-warning'
          }
        },
        size: {
          '3xs': '',
          '2xs': '',
          xs: '',
          sm: '',
          md: '',
          lg: '',
          xl: '',
          '2xl': ''
        },
        reverse: {
          false: {
            separator: 'group-data-[state=completed]:bg-(--b24ui-background-active)'
          },
          true: {
            separator: 'group-data-[state=active]:bg-(--b24ui-background) group-data-[state=completed]:bg-(--b24ui-background)'
          }
        }
      },
      compoundVariants: [
        {
          orientation: 'horizontal',
          size: '3xs',
          class: {
            wrapper: 'pe-4.5'
          }
        },
        {
          orientation: 'horizontal',
          size: '2xs',
          class: {
            wrapper: 'pe-5'
          }
        },
        {
          orientation: 'horizontal',
          size: 'xs',
          class: {
            wrapper: 'pe-5.5'
          }
        },
        {
          orientation: 'horizontal',
          size: 'sm',
          class: {
            wrapper: 'pe-6'
          }
        },
        {
          orientation: 'horizontal',
          size: 'md',
          class: {
            wrapper: 'pe-6.5'
          }
        },
        {
          orientation: 'horizontal',
          size: 'lg',
          class: {
            wrapper: 'pe-7'
          }
        },
        {
          orientation: 'horizontal',
          size: 'xl',
          class: {
            wrapper: 'pe-7.5'
          }
        },
        {
          orientation: 'horizontal',
          size: '2xl',
          class: {
            wrapper: 'pe-8'
          }
        },
        {
          orientation: 'horizontal',
          size: '3xl',
          class: {
            wrapper: 'pe-8.5'
          }
        },
        {
          orientation: 'vertical',
          size: '3xs',
          class: {
            wrapper: '-mt-0.5 pb-4.5'
          }
        },
        {
          orientation: 'vertical',
          size: '2xs',
          class: {
            wrapper: 'pb-5'
          }
        },
        {
          orientation: 'vertical',
          size: 'xs',
          class: {
            wrapper: 'mt-0.5 pb-5.5'
          }
        },
        {
          orientation: 'vertical',
          size: 'sm',
          class: {
            wrapper: 'mt-1 pb-6'
          }
        },
        {
          orientation: 'vertical',
          size: 'md',
          class: {
            wrapper: 'mt-1.5 pb-6.5'
          }
        },
        {
          orientation: 'vertical',
          size: 'lg',
          class: {
            wrapper: 'mt-2 pb-7'
          }
        },
        {
          orientation: 'vertical',
          size: 'xl',
          class: {
            wrapper: 'mt-2.5 pb-7.5'
          }
        },
        {
          orientation: 'vertical',
          size: '2xl',
          class: {
            wrapper: 'mt-3 pb-8'
          }
        }
      ],
      defaultVariants: {
        size: 'md',
        color: 'air-primary'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        timeline: {
          slots: {
            root: 'flex gap-1.5',
            item: 'group relative flex flex-1 gap-3',
            container: 'relative flex items-center gap-1.5',
            indicator: 'group-data-[state=completed]:text-(--b24ui-color) group-data-[state=active]:text-(--b24ui-color) text-(--b24ui-typography-description-color) group-data-[state=completed]:bg-(--b24ui-background) group-data-[state=active]:bg-(--b24ui-background-active)',
            separator: 'flex-1 rounded-(--ui-border-radius-circle) bg-(--ui-color-base-6)',
            wrapper: 'w-full',
            date: 'text-(--b24ui-typography-label-color) text-(length:--ui-font-size-xs)/(--ui-font-line-height-md)',
            title: 'font-(--ui-font-weight-medium) text-(--b24ui-typography-legend-color) text-(length:--ui-font-size-sm)',
            description: 'text-(--b24ui-typography-description-color) text-wrap text-(length:--ui-font-size-sm)'
          },
          variants: {
            orientation: {
              horizontal: {
                root: 'flex-row w-full',
                item: 'flex-col',
                separator: 'h-0.5'
              },
              vertical: {
                root: 'flex-col',
                container: 'flex-col',
                separator: 'w-0.5'
              }
            },
            color: {
              'air-primary': {
                root: 'style-filled'
              },
              'air-primary-success': {
                root: 'style-filled-success'
              },
              'air-primary-alert': {
                root: 'style-filled-alert'
              },
              'air-primary-copilot': {
                root: 'style-filled-copilot'
              },
              'air-primary-warning': {
                root: 'style-filled-warning'
              }
            },
            size: {
              '3xs': '',
              '2xs': '',
              xs: '',
              sm: '',
              md: '',
              lg: '',
              xl: '',
              '2xl': ''
            },
            reverse: {
              false: {
                separator: 'group-data-[state=completed]:bg-(--b24ui-background-active)'
              },
              true: {
                separator: 'group-data-[state=active]:bg-(--b24ui-background) group-data-[state=completed]:bg-(--b24ui-background)'
              }
            }
          },
          compoundVariants: [
            {
              orientation: 'horizontal',
              size: '3xs',
              class: {
                wrapper: 'pe-4.5'
              }
            },
            {
              orientation: 'horizontal',
              size: '2xs',
              class: {
                wrapper: 'pe-5'
              }
            },
            {
              orientation: 'horizontal',
              size: 'xs',
              class: {
                wrapper: 'pe-5.5'
              }
            },
            {
              orientation: 'horizontal',
              size: 'sm',
              class: {
                wrapper: 'pe-6'
              }
            },
            {
              orientation: 'horizontal',
              size: 'md',
              class: {
                wrapper: 'pe-6.5'
              }
            },
            {
              orientation: 'horizontal',
              size: 'lg',
              class: {
                wrapper: 'pe-7'
              }
            },
            {
              orientation: 'horizontal',
              size: 'xl',
              class: {
                wrapper: 'pe-7.5'
              }
            },
            {
              orientation: 'horizontal',
              size: '2xl',
              class: {
                wrapper: 'pe-8'
              }
            },
            {
              orientation: 'horizontal',
              size: '3xl',
              class: {
                wrapper: 'pe-8.5'
              }
            },
            {
              orientation: 'vertical',
              size: '3xs',
              class: {
                wrapper: '-mt-0.5 pb-4.5'
              }
            },
            {
              orientation: 'vertical',
              size: '2xs',
              class: {
                wrapper: 'pb-5'
              }
            },
            {
              orientation: 'vertical',
              size: 'xs',
              class: {
                wrapper: 'mt-0.5 pb-5.5'
              }
            },
            {
              orientation: 'vertical',
              size: 'sm',
              class: {
                wrapper: 'mt-1 pb-6'
              }
            },
            {
              orientation: 'vertical',
              size: 'md',
              class: {
                wrapper: 'mt-1.5 pb-6.5'
              }
            },
            {
              orientation: 'vertical',
              size: 'lg',
              class: {
                wrapper: 'mt-2 pb-7'
              }
            },
            {
              orientation: 'vertical',
              size: 'xl',
              class: {
                wrapper: 'mt-2.5 pb-7.5'
              }
            },
            {
              orientation: 'vertical',
              size: '2xl',
              class: {
                wrapper: 'mt-3 pb-8'
              }
            }
          ],
          defaultVariants: {
            size: 'md',
            color: 'air-primary'
          }
        }
      }
    })
  ]
})

TableWrapper

Wrapper for displaying a html table

User

A component to display user details, including their name, bio, and profile picture.