|Kit

Timeline

Vertical, chronological list of events — activity feed, audit log, changelog. Pure Server Component with namespaced parts.

Timeline renders a vertical, chronological list of events. It's a pure Server Component — no state, no "use client" — so it drops straight into an RSC tree or an MDX page.

You compose it from Timeline.Item (one per event — it renders the bullet and the connecting line to the next item automatically), with two optional children: Timeline.Label for a leading date/timestamp, and Timeline.Content for the body, which can hold a Timeline.Title.

import { Timeline } from "@42/ui-react/timeline";

<Timeline>
  <Timeline.Item color="green" variant="filled">
    <Timeline.Label>Mar 1, 2026</Timeline.Label>
    <Timeline.Content>
      <Timeline.Title>Libft submitted</Timeline.Title>
    </Timeline.Content>
  </Timeline.Item>
  <Timeline.Item variant="outline">
    <Timeline.Content>
      <Timeline.Title>Evaluation validated</Timeline.Title>
    </Timeline.Content>
  </Timeline.Item>
</Timeline>;

Basic

Without Timeline.Label, items lay out in a single column — the label track only exists when at least one item uses it (see Labels). An item with no variant gets Timeline's own default — the same neutral, high-contrast (variant × color) default treatment as Button/Card, not a colored dot.

  1. Application submitted
  2. Logic test passed
  3. Piscine started

Code

<Timeline>  <Timeline.Item color="brand" variant="filled">    <Timeline.Content>      <Timeline.Title>Application submitted</Timeline.Title>    </Timeline.Content>  </Timeline.Item>  <Timeline.Item color="brand" variant="filled">    <Timeline.Content>      <Timeline.Title>Logic test passed</Timeline.Title>    </Timeline.Content>  </Timeline.Item>  <Timeline.Item>    <Timeline.Content>      <Timeline.Title>Piscine started</Timeline.Title>    </Timeline.Content>  </Timeline.Item></Timeline>

Labels

Timeline.Label renders into a leading column, sized to fit whatever the widest label is — not a fixed split. Add it to just one item and the column still appears (sized to that one label) without disturbing the others' alignment. Pass color to tint the label (and any icon inside it) to match the item's accent, and compose an icon in directly — Timeline.Label lays its children out in a row.

  1. Mar 1, 2026

    Libft submitted

  2. Mar 3, 2026

    Evaluation booked

  3. Pending

    ft_printf

Code

<Timeline>  <Timeline.Item color="green" variant="filled">    <Timeline.Label color="green"><Calendar />Mar 1, 2026</Timeline.Label>    <Timeline.Content>      <Timeline.Title>Libft submitted</Timeline.Title>    </Timeline.Content>  </Timeline.Item>  <Timeline.Item color="green" variant="filled">    <Timeline.Label color="green"><Calendar />Mar 3, 2026</Timeline.Label>    <Timeline.Content>      <Timeline.Title>Evaluation booked</Timeline.Title>    </Timeline.Content>  </Timeline.Item>  <Timeline.Item>    <Timeline.Label><Calendar />Pending</Timeline.Label>    <Timeline.Content>      <Timeline.Title>ft_printf</Timeline.Title>    </Timeline.Content>  </Timeline.Item></Timeline>

Status colors & custom bullets

color and variant on Timeline.Item theme the bullet — the same (variant × color) axis as Badge/Button. filled rings its own fill with a background-colored gap, so it reads as a halo rather than a flat disc. Pass a bullet node (an icon, <Spinner>, anything) to replace the dot entirely, e.g. for an in-progress step.

  1. Libft validated
  2. ft_printf in evaluation
  3. SpinnerLoading
    get_next_line in progress
  4. Minishell

Code

<Timeline>  <Timeline.Item color="green" variant="filled" bullet={<Check />}>    <Timeline.Content>      <Timeline.Title>Libft validated</Timeline.Title>    </Timeline.Content>  </Timeline.Item>  <Timeline.Item color="brand" variant="filled" bullet={<Users />}>    <Timeline.Content>      <Timeline.Title>ft_printf in evaluation</Timeline.Title>    </Timeline.Content>  </Timeline.Item>  <Timeline.Item color="brand" variant="filled" bullet={<Spinner />}>    <Timeline.Content>      <Timeline.Title>get_next_line in progress</Timeline.Title>    </Timeline.Content>  </Timeline.Item>  <Timeline.Item variant="outline">    <Timeline.Content>      <Timeline.Title>Minishell</Timeline.Title>    </Timeline.Content>  </Timeline.Item></Timeline>

Dashed bullet

variant="dashed" draws the outline ring with a dashed stroke instead of solid — reads as a lighter-weight or "not yet reached" step, distinct from outline's solid ring.

  1. Evaluated
  2. Evaluation scheduled
  3. Waiting for a slot

Code

<Timeline>  <Timeline.Item color="purple" variant="filled">    <Timeline.Content>      <Timeline.Title>Evaluated</Timeline.Title>    </Timeline.Content>  </Timeline.Item>  <Timeline.Item color="purple" variant="dashed">    <Timeline.Content>      <Timeline.Title>Evaluation scheduled</Timeline.Title>    </Timeline.Content>  </Timeline.Item>  <Timeline.Item color="purple" variant="outline">    <Timeline.Content>      <Timeline.Title>Waiting for a slot</Timeline.Title>    </Timeline.Content>  </Timeline.Item></Timeline>

Gradient

variant="gradient" fills the bullet with a gradient instead of a flat color, the same gradient prop shape as Badge/Card (from/to/via/dir, defaulting to purple-300 → pink-400, left-to-right).

  1. Bocal member
  2. Blackhole warning

Code

<Timeline.Item variant="gradient">{/* … */}</Timeline.Item><Timeline.Item variant="gradient" gradient={{ from: '#f59e0b', to: '#ef4444', dir: 'to-br' }}>  {/* … */}</Timeline.Item>

Gradient with axisOffset

axisOffset works the same regardless of variant — it only moves the bullet+line column, never the color. A gradient bullet aligned to a card's title still draws its connecting line as the same gradient below it, and the next item's leading segment (filling the gap axisOffset opens above its own bullet) continues that gradient too, since it inherits its look from whichever item sits above it rather than staying neutral.

  1. ft_transcendence

    In progress — gradient bullet aligned to this title via axisOffset.

  2. Common Core completed

Code

<Timeline size="lg">  <Timeline.Item size="xl" variant="gradient" axisOffset="11px">    <Timeline.Content>      <Card padding="none">        <Card.Header>          <Card.Title>ft_transcendence</Card.Title>        </Card.Header>        <Card.Content>          <Text span c="muted">            In progress — gradient bullet aligned to this title via axisOffset.          </Text>        </Card.Content>      </Card>    </Timeline.Content>  </Timeline.Item>  <Timeline.Item variant="outline" size="xs" axisOffset="18px">    <Timeline.Content>      <Card padding="none">        <Card.Header>          <Card.Title>Common Core completed</Card.Title>        </Card.Header>      </Card>    </Timeline.Content>  </Timeline.Item></Timeline>

Dashed line

lineVariant="dashed" on Timeline swaps every connecting line for a dashed one. A Timeline.Item can override just the segment below it with its own lineVariant, mixing solid and dashed within one timeline.

  1. libft pushed
  2. Awaiting evaluation
  1. ft_printf validated
  2. minitalk in evaluation
  3. pipex

Code

<Timeline lineVariant="dashed">{/* … */}</Timeline>// Mixed, per segment:<Timeline>  <Timeline.Item color="brand" variant="filled">{/* solid below */}</Timeline.Item>  <Timeline.Item lineVariant="dashed">{/* dashed below */}</Timeline.Item>  <Timeline.Item variant="outline">{/* … */}</Timeline.Item></Timeline>

Density

size on Timeline scales the bullet, line thickness, spacing, and text from xs to xl (default md), reusing the kit's canonical Size scale. A Timeline.Item can override just its own bullet with its own size — everything else (line, spacing, text) still follows the timeline's density.

  1. Compact (sm)
  2. Common Core project
  1. Roomy (lg)
  2. Common Core project

Code

<Timeline size="sm">{/* … */}</Timeline><Timeline size="lg">{/* … */}</Timeline>

  1. Piscine started — bigger dot, same line and spacing

  2. Common Core project

Code

<Timeline>  <Timeline.Item color="brand" variant="filled" size="xl">    <Timeline.Content>      <Timeline.Title>Piscine started — bigger dot, same line and spacing</Timeline.Title>    </Timeline.Content>  </Timeline.Item>  <Timeline.Item>    <Timeline.Content>      <Timeline.Title>Common Core project</Timeline.Title>    </Timeline.Content>  </Timeline.Item></Timeline>

Course roadmap

Because Timeline.Content takes any content, an item's body is often a full card, not just a title — a curriculum roadmap composes Card (+ Badge for status, Button for actions) inside each item. The current step gets a larger, ringed default bullet and a brighter card border; upcoming steps get a small light dot and the card's own quieter default border. Each item's axisOffset="Npx" nudges the bullet and the connecting line down together to line up with that card's title — Timeline has no way to know a title sits inside its content on its own.

  1. Shell Fundamentals

    Available

    Learn the basics of using the shell, a command-line interpreter that allows you to interact with your operating system.

  2. Git Fundamentals

    Unavailable

    Learn the basics of Git, a popular version control system used to track changes in your code, collaborate with others, and submit your work for evaluation.

  3. Shell searching and finding

    Unavailable

    Learn how to find files and information within your system thanks to find and grep to locate specific files, search within files, and filter results based on various criteria.

  4. Exam 00

    Exam details will soon be available.

  5. Square

Code

<Timeline size="lg">  {/* axisOffset shifts the bullet+line column down to line up with this      card's title — Timeline can't see inside Timeline.Content to know      where a title sits on its own. */}  <Timeline.Item size="xl" axisOffset="11px">    <Timeline.Content>      <Card padding="none" className="border-gray-light-400 dark:border-gray-dark-400">        <Card.Header>          <div className="flex items-center justify-between gap-3">            <Card.Title>Shell Fundamentals</Card.Title>            <Badge variant="light">Available</Badge>          </div>        </Card.Header>        <Card.Content>          <Text span c="muted">            Learn the basics of using the shell, a command-line interpreter            that allows you to interact with your operating system.          </Text>        </Card.Content>        <Card.Footer>          <Button size="sm">Discover my project</Button>        </Card.Footer>      </Card>    </Timeline.Content>  </Timeline.Item>  <Timeline.Item variant="light" color="neutral" size="xs" axisOffset="18px">    <Timeline.Content>      <Card padding="none">        <Card.Header>          <div className="flex items-center justify-between gap-3">            <Card.Title>Git Fundamentals</Card.Title>            <Badge variant="light" color="neutral">Unavailable</Badge>          </div>        </Card.Header>        <Card.Content>          <Text span c="muted">            Learn the basics of Git, a popular version control system used            to track changes in your code, collaborate with others, and            submit your work for evaluation.          </Text>        </Card.Content>      </Card>    </Timeline.Content>  </Timeline.Item>  <Timeline.Item variant="light" color="neutral" size="xs" axisOffset="18px">    <Timeline.Content>      <Card padding="none">        <Card.Header>          <div className="flex items-center justify-between gap-3">            <Card.Title>Shell searching and finding</Card.Title>            <Badge variant="light" color="neutral">Unavailable</Badge>          </div>        </Card.Header>        <Card.Content>          <Text span c="muted">            Learn how to find files and information within your system            thanks to find and grep to locate specific files, search within            files, and filter results based on various criteria.          </Text>        </Card.Content>      </Card>    </Timeline.Content>  </Timeline.Item>  <Timeline.Item variant="light" color="neutral" size="xs" axisOffset="18px">    <Timeline.Content>      <Card padding="none">        <Card.Header>          <Card.Title>Exam 00</Card.Title>        </Card.Header>        <Card.Content>          <Text span c="muted">Exam details will soon be available.</Text>        </Card.Content>      </Card>    </Timeline.Content>  </Timeline.Item>  <Timeline.Item variant="light" color="neutral" size="xs" axisOffset="22px">    <Timeline.Content>      <Card padding="none">        <Card.Header>          <div className="flex items-center justify-between gap-3">            <Card.Title>Square</Card.Title>            <div className="flex gap-2">              <Button size="sm">Register</Button>              <Button variant="subtle" color="white" size="sm">Go to Rush</Button>            </div>          </div>        </Card.Header>      </Card>    </Timeline.Content>  </Timeline.Item></Timeline>

Subcomponents

Prop

Type

API

Timeline

Prop

Type

Timeline.Item

Prop

Type

Magic: The Gathering example

A full DataTable integration against a real API (scryfall.com) — server-driven sorting, filtering, and global search synced to the URL, a row-detail Drawer, and real loading/error/retry states.

Spinner

Inline activity indicator. Inherits color and size by default so Button / ActionIcon embed it cleanly; opt-in props for standalone use.

On this page

BasicLabelsStatus colors & custom bulletsDashed bulletGradientGradient with axisOffsetDashed lineDensityCourse roadmapSubcomponentsAPITimelineTimeline.Item