Timeline

A flowing information display component connected by a main line, suitable for building enterprise milestones, version release logs, and task approval progress flows.

Demo

Preview

垂直时间线 — 所有 Dot 变体

默认 (default) 变体

默认白底黑字圆点样式。

主要 (primary) 变体

珊瑚红主色圆点样式。

次要 (secondary) 变体

薄荷青辅助色方形样式。

强调 (accent) 变体

黄色强调色菱形样式。

成功 (success) 变体

绿色成功色圆点样式。

危险 (danger) 变体

红色危险色圆点样式。

水平时间线

需求分析

2026-06-01

设计开发

2026-06-15

测试发布

2026-07-01

迭代优化

2026-07-15

垂直交替布局 — alternate

立项启动

确定产品方向与核心目标。

设计开发

完成视觉设计与首轮开发。

测试验收

回归测试与性能调优。

正式发布

面向全量用户开放。

Installation

pnpm dlx brutx-vue@latest add timeline

Usage

vue

<script setup>
import {
    Timeline,
    TimelineItem,
    TimelineSeparator,
    TimelineDot,
    TimelineConnector,
    TimelineContent
} from 'brutx-ui-vue'
</script>

<template>
    <Timeline orientation="vertical">
        <!-- Node 1 -->
        <TimelineItem>
            <TimelineSeparator>
                <TimelineDot variant="primary" shape="circle">1</TimelineDot>
                <TimelineConnector />
            </TimelineSeparator>
            <TimelineContent class="pl-2">
                <div class="font-black">Phase One</div>
                <p class="font-normal text-sm mt-1">Description of Phase One goes here.</p>
            </TimelineContent>
        </TimelineItem>
        
        <!-- Node 2 -->
        <TimelineItem>
            <TimelineSeparator>
                <TimelineDot variant="accent" shape="square">2</TimelineDot>
            </TimelineSeparator>
            <TimelineContent class="pl-2">
                <div class="font-black">Phase Two</div>
                <p class="font-normal text-sm mt-1">Description of Phase Two goes here.</p>
            </TimelineContent>
        </TimelineItem>
    </Timeline>
</template>

Horizontal Timeline

Set orientation="horizontal" to switch to horizontal layout. In horizontal mode, it is recommended to add text-center on TimelineContent to align text with the icon:

vue

<template>
    <Timeline orientation="horizontal">
        <TimelineItem>
            <TimelineSeparator>
                <TimelineDot variant="primary" shape="circle">1</TimelineDot>
                <TimelineConnector />
            </TimelineSeparator>
            <TimelineContent class="text-center">
                <div class="font-black text-sm">Requirements</div>
                <div class="text-xs text-brutal-fg/60 mt-1">2026-06-01</div>
            </TimelineContent>
        </TimelineItem>

        <TimelineItem>
            <TimelineSeparator>
                <TimelineDot variant="accent" shape="square">2</TimelineDot>
                <TimelineConnector />
            </TimelineSeparator>
            <TimelineContent class="text-center">
                <div class="font-black text-sm">Design & Dev</div>
                <div class="text-xs text-brutal-fg/60 mt-1">2026-06-15</div>
            </TimelineContent>
        </TimelineItem>

        <TimelineItem>
            <TimelineSeparator>
                <TimelineDot variant="success" shape="circle">3</TimelineDot>
            </TimelineSeparator>
            <TimelineContent class="text-center">
                <div class="font-black text-sm">Test & Release</div>
                <div class="text-xs text-brutal-fg/60 mt-1">2026-07-01</div>
            </TimelineContent>
        </TimelineItem>
    </Timeline>
</template>

Alternate Layout

Set the alternate property to true to alternate the vertical timeline content along the separator line: even-indexed items (0, 2, 4...) display content on the left, odd-indexed items (1, 3, 5...) display content on the right, creating a symmetrical alternating rhythm. This property only takes effect when orientation="vertical"; in horizontal mode, it is automatically ignored.

vue

<template>
    <Timeline orientation="vertical" alternate>
        <TimelineItem>
            <TimelineSeparator>
                <TimelineDot variant="primary" shape="circle">1</TimelineDot>
                <TimelineConnector />
            </TimelineSeparator>
            <TimelineContent class="pl-2">
                <div class="font-black text-base">Project Kickoff</div>
                <p class="text-sm text-brutal-fg/80 mt-1 font-normal">Define product direction and core objectives.</p>
            </TimelineContent>
        </TimelineItem>

        <TimelineItem>
            <TimelineSeparator>
                <TimelineDot variant="accent" shape="square">2</TimelineDot>
                <TimelineConnector />
            </TimelineSeparator>
            <TimelineContent class="pl-2">
                <div class="font-black text-base">Design & Development</div>
                <p class="text-sm text-brutal-fg/80 mt-1 font-normal">Complete visual design and first round of development.</p>
            </TimelineContent>
        </TimelineItem>

        <TimelineItem>
            <TimelineSeparator>
                <TimelineDot variant="success" shape="diamond">3</TimelineDot>
                <TimelineConnector />
            </TimelineSeparator>
            <TimelineContent class="pl-2">
                <div class="font-black text-base">Testing & Acceptance</div>
                <p class="text-sm text-brutal-fg/80 mt-1 font-normal">Regression testing and performance tuning.</p>
            </TimelineContent>
        </TimelineItem>

        <TimelineItem>
            <TimelineSeparator>
                <TimelineDot variant="danger" shape="circle">4</TimelineDot>
            </TimelineSeparator>
            <TimelineContent class="pl-2">
                <div class="font-black text-base">Official Release</div>
                <p class="text-sm text-brutal-fg/80 mt-1 font-normal">Available to all users.</p>
            </TimelineContent>
        </TimelineItem>
    </Timeline>
</template>

Note

The alternate layout index is automatically injected by Timeline starting from 0 based on the order of TimelineItem elements; no manual specification is needed. When alternate and horizontal are set simultaneously, horizontal mode takes precedence and alternate has no effect.

Variants

TimelineDot supports diverse neo-brutalist geometric designs and color themes, customizable via shape and variant:

Shape (`shape`)

Shape	Description
`circle`	Classic circular badge
`square`	Bold, angular card shape
`diamond`	Diamond rotated 45 degrees (text slot content is automatically counter-rotated internally to prevent tilted typography)

Color (`variant`)

Variant	Description
`default`	Default color scheme
`primary`	Primary color
`secondary`	Secondary color
`accent`	Accent color
`success`	Success color
`danger`	Danger color

Sub-components

Component	Description
`Timeline`	Root container, manages layout direction and alternate arrangement
`TimelineItem`	Single time node
`TimelineSeparator`	Node separator area, contains Dot and Connector
`TimelineDot`	Node badge, supports shape and color variants
`TimelineConnector`	Connector line between nodes
`TimelineContent`	Node content area

API Reference

Timeline

Timeline — Props
Name	Type	Default	Description
`orientation`	`TimelineOrientation \| undefined`	`"vertical"`	Sets the timeline to vertical or horizontal layout; horizontal timelines can scroll horizontally.
Details Declared type TimelineOrientation \| undefined Literal values `"horizontal"` `"vertical"` Referenced types TimelineOrientation Type definition — TimelineOrientation export type TimelineOrientation = 'vertical' \| 'horizontal' Default value details Declaration `'vertical'` Source: packages/ui/src/components/timeline/Timeline.vue Resolved value `"vertical"` Source Timeline.vue:9 packages/ui/src/components/timeline/Timeline.vue
`alternate`	`boolean \| undefined`	`false`	Alternates adjacent item content on opposite sides of the axis in vertical orientation.
Details Declared type boolean \| undefined Literal values `false` `true` Default value details Declaration `false` Source: packages/ui/src/components/timeline/Timeline.vue Resolved value `false` Source Timeline.vue:10 packages/ui/src/components/timeline/Timeline.vue
`class`	`string \| undefined`	`undefined`	Custom CSS classes added to the outer timeline list container.
Details Declared type string \| undefined Default value details Declaration `undefined` Source: packages/ui/src/components/timeline/Timeline.vue Resolved value `undefined` Source Timeline.vue:11 packages/ui/src/components/timeline/Timeline.vue

TimelineConnector

TimelineConnector — Props
Name	Type	Default	Description
`class`	`string \| undefined`	`undefined`	Custom CSS classes added to the timeline connector element.
Details Declared type string \| undefined Default value details Declaration `undefined` Source: packages/ui/src/components/timeline/TimelineConnector.vue Resolved value `undefined` Source TimelineConnector.vue:7 packages/ui/src/components/timeline/TimelineConnector.vue

TimelineContent

TimelineContent — Props
Name	Type	Default	Description
`class`	`string \| undefined`	`undefined`	Custom CSS classes added to the timeline item content area.
Details Declared type string \| undefined Default value details Declaration `undefined` Source: packages/ui/src/components/timeline/TimelineContent.vue Resolved value `undefined` Source TimelineContent.vue:6 packages/ui/src/components/timeline/TimelineContent.vue

TimelineContent — Slots
Name	Signature or type	Description
`#default`	`{}`	Renders the main content for the current timeline item.
Details Declared type {} Source TimelineContent.vue packages/ui/src/components/timeline/TimelineContent.vue

TimelineDot

TimelineDot — Props
Name	Type	Default	Description
`variant`	`"accent" \| "danger" \| "default" \| "primary" \| "secondary" \| "success" \| undefined`	`"accent"`	Sets the color variant of the timeline marker.
Details Declared type NonNullable<"default" \| "primary" \| "secondary" \| "success" \| "danger" \| "accent" \| null \| undefined> \| undefined Literal values `"accent"` `"danger"` `"default"` `"primary"` `"secondary"` `"success"` Default value details Declaration `'accent'` Source: packages/ui/src/components/timeline/TimelineDot.vue Resolved value `"accent"` Source TimelineDot.vue:10 packages/ui/src/components/timeline/TimelineDot.vue
`shape`	`"circle" \| "diamond" \| "square" \| undefined`	`"circle"`	Sets the timeline marker to a circle, square, or diamond.
Details Declared type NonNullable<"square" \| "circle" \| "diamond" \| null \| undefined> \| undefined Literal values `"circle"` `"diamond"` `"square"` Default value details Declaration `'circle'` Source: packages/ui/src/components/timeline/TimelineDot.vue Resolved value `"circle"` Source TimelineDot.vue:11 packages/ui/src/components/timeline/TimelineDot.vue
`led`	`boolean \| undefined`	`false`	Enables a decorative LED pulse glow; the animation respects reduced-motion preferences.
Details Declared type boolean \| undefined Literal values `false` `true` Default value details Declaration `false` Source: packages/ui/src/components/timeline/TimelineDot.vue Resolved value `false` Source TimelineDot.vue:13 packages/ui/src/components/timeline/TimelineDot.vue
`class`	`string \| undefined`	`undefined`	Custom CSS classes added to the timeline marker element.
Details Declared type string \| undefined Default value details Declaration `undefined` Source: packages/ui/src/components/timeline/TimelineDot.vue Resolved value `undefined` Source TimelineDot.vue:14 packages/ui/src/components/timeline/TimelineDot.vue

TimelineDot — Slots
Name	Signature or type	Description
`#default`	`{}`	Displays content such as a number or icon inside the timeline marker.
Details Declared type {} Source TimelineDot.vue packages/ui/src/components/timeline/TimelineDot.vue

TimelineItem

TimelineItem — Props
Name	Type	Default	Description
`index`	`number \| undefined`	`undefined`	The item index. Timeline injects it in order for direct children, and an explicit value overrides the injected index.
Details Declared type number \| undefined Default value details Declaration `undefined` Source: packages/ui/src/components/timeline/TimelineItem.vue Resolved value `undefined` Source TimelineItem.vue:7 packages/ui/src/components/timeline/TimelineItem.vue
`class`	`string \| undefined`	`undefined`	Custom CSS classes added to the individual timeline item container.
Details Declared type string \| undefined Default value details Declaration `undefined` Source: packages/ui/src/components/timeline/TimelineItem.vue Resolved value `undefined` Source TimelineItem.vue:8 packages/ui/src/components/timeline/TimelineItem.vue

TimelineItem — Slots
Name	Signature or type	Description
`#default`	`{}`	Composes the TimelineSeparator and TimelineContent for this item.
Details Declared type {} Source TimelineItem.vue packages/ui/src/components/timeline/TimelineItem.vue

TimelineSeparator

TimelineSeparator — Props
Name	Type	Default	Description
`class`	`string \| undefined`	`undefined`	Custom CSS classes added to the separator area containing the axis and marker.
Details Declared type string \| undefined Default value details Declaration `undefined` Source: packages/ui/src/components/timeline/TimelineSeparator.vue Resolved value `undefined` Source TimelineSeparator.vue:7 packages/ui/src/components/timeline/TimelineSeparator.vue

TimelineSeparator — Slots
Name	Signature or type	Description
`#default`	`{}`	Contains the TimelineDot and TimelineConnector.
Details Declared type {} Source TimelineSeparator.vue packages/ui/src/components/timeline/TimelineSeparator.vue

Accessibility

Semantic Structure: The timeline uses list structure (<ol>/<li>) to organize nodes, making it easy for screen readers to understand content order
ARIA Attributes: The root container sets role="list", each node sets role="listitem", providing clear list semantics
Layout Direction: The orientation property automatically sets aria-orientation to inform assistive technologies of the current layout direction
Content Hierarchy: Content in TimelineDot (such as numbers, icons) should be accompanied by text descriptions to ensure complete information delivery

Timeline ​

Demo ​

垂直时间线 — 所有 Dot 变体

水平时间线

垂直交替布局 — alternate

Installation ​

Usage ​

Horizontal Timeline ​

Alternate Layout ​

Variants ​

Shape (shape) ​

Color (variant) ​

Sub-components ​

API Reference ​

Timeline

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

TimelineConnector

Declared type

Default value details

Source

TimelineContent

Declared type

Default value details

Source

Declared type

Source

TimelineDot

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Source

TimelineItem

Declared type

Default value details

Source

Declared type

Default value details

Source

Declared type

Source

TimelineSeparator

Declared type

Default value details

Source

Declared type

Source

Accessibility ​

Timeline

Demo

Installation

Usage

Horizontal Timeline

Alternate Layout

Variants

Shape (`shape`)

Color (`variant`)

Sub-components

API Reference

Accessibility