Timeline

Orders milestones or activity events along a chronological track.

View preview API reference Open Figma library

FrameworksAstro · React · Elements

Registry commandlumen add Timeline

InteractionNative markup

Design sourceLibrary file

See it in context

Preview

10:00 Design approved
12:20 Build checks passed
14:30 Release deployed

Copy a working example

Usage

---
import {
  Timeline,
  TimelineItem
} from '@santi020k/lumen-astro'
---

<Timeline>
  <TimelineItem><strong>10:00</strong> <span>Design approved</span></TimelineItem>
  <TimelineItem><strong>12:20</strong> <span>Build checks passed</span></TimelineItem>
  <TimelineItem><strong>14:30</strong> <span>Release deployed</span></TimelineItem>
</Timeline>

---
import {
  Timeline,
  TimelineItem
} from '@santi020k/lumen-astro'
---

<Timeline>
  <TimelineItem><strong>10:00</strong> <span>Design approved</span></TimelineItem>
  <TimelineItem><strong>12:20</strong> <span>Build checks passed</span></TimelineItem>
  <TimelineItem><strong>14:30</strong> <span>Release deployed</span></TimelineItem>
</Timeline>

import { Timeline } from '@santi020k/lumen-react'

export const Example = () => (
  <>
    <Timeline>
      <TimelineItem><strong>10:00</strong> <span>Design approved</span></TimelineItem>
      <TimelineItem><strong>12:20</strong> <span>Build checks passed</span></TimelineItem>
      <TimelineItem><strong>14:30</strong> <span>Release deployed</span></TimelineItem>
    </Timeline>
  </>
)

import { Timeline } from '@santi020k/lumen-react'

export const Example = () => (
  <>
    <Timeline>
      <TimelineItem><strong>10:00</strong> <span>Design approved</span></TimelineItem>
      <TimelineItem><strong>12:20</strong> <span>Build checks passed</span></TimelineItem>
      <TimelineItem><strong>14:30</strong> <span>Release deployed</span></TimelineItem>
    </Timeline>
  </>
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<lumen-timeline>
  <TimelineItem><strong>10:00</strong> <span>Design approved</span></TimelineItem>
  <TimelineItem><strong>12:20</strong> <span>Build checks passed</span></TimelineItem>
  <TimelineItem><strong>14:30</strong> <span>Release deployed</span></TimelineItem>
</lumen-timeline>

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<lumen-timeline>
  <TimelineItem><strong>10:00</strong> <span>Design approved</span></TimelineItem>
  <TimelineItem><strong>12:20</strong> <span>Build checks passed</span></TimelineItem>
  <TimelineItem><strong>14:30</strong> <span>Release deployed</span></TimelineItem>
</lumen-timeline>

Choose your target

Add this component

Choose the package for your runtime. All adapters share the Lumen stylesheet. Use the matching registry command when you want a local wrapper for that framework.

pnpm add @santi020k/lumen-astro

pnpm add @santi020k/lumen-astro

lumen add Timeline

lumen add Timeline

pnpm add @santi020k/lumen-react

pnpm add @santi020k/lumen-react

lumen add Timeline --target react

lumen add Timeline --target react

pnpm add @santi020k/lumen-elements

pnpm add @santi020k/lumen-elements

lumen add Timeline --target elements

lumen add Timeline --target elements

API reference

Lumen-specific props and runtime attributes for the Astro primitive. React props follow the same names; Elements use equivalent kebab-case attributes where custom elements expose them.

Attribute	Values	Default	Description
class, className	string	""	Merges custom classes with the generated ui-* root classes.
...native attributes	HTML attributes	-	Forwards standard attributes to the root element unless the component consumes them.