# Timeline (/docs/timeline) `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`. ```tsx import { Timeline } from "@42-central/ui-react/timeline"; Mar 1, 2026 Libft submitted Evaluation validated ; ``` ## Basic [#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](#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. Application submitted Logic test passed Piscine started ## Labels [#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. Mar 1, 2026 Libft submitted Mar 3, 2026 Evaluation booked Pending ft_printf ## Status colors & custom bullets [#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, ``, anything) to replace the dot entirely, e.g. for an in-progress step. Libft validated ft_printf in evaluation get_next_line in progress Minishell ## Line colors [#line-colors] Every connecting line blends from its dot's color into the next dot's, so a run of statuses reads as one continuous path instead of hard color cuts at each bullet. Every line end is always the exact color its dot draws — whatever the variant, color, or state below — so the line never lands on a color the dot doesn't have. ### Blending between colors [#blending-between-colors] Any two neighbours blend — palette colors, a gradient, and a `default` dot, in whatever order. Libft validated 125/100 — bonus included. ft\_printf retry Failed the first evaluation, booked a second slot. Blackhole in 12 days Validate a project to push it back. Common Core reached Gradient bullets blend through their own stops. Specialization ### Every variant [#every-variant] Each end takes the color its bullet draws with: `--c-solid` for `filled`, `outline` and `dashed`, a `gradient`'s own stops, and a `default` dot's inverted fill. filled Ends in --c-solid, its fill. outline Ends in --c-solid, its ring. dashed Ends in --c-solid, its dashed ring. gradient Entered at from, left at to. default Ends in its own inverted fill. ### Uncolored bullets [#uncolored-bullets] Without a `color`, a bullet draws in the neutral palette — and its line ends read the same slots, so they land on the neutral too. filled outline dashed ### Gradient stops [#gradient-stops] A `gradient` bullet is entered at its `from` stop and left at its `to`, so chained gradients read as one continuous fade — each line runs from one bullet's `to` into the next one's `from`. Sunrise Amber → red. Ocean The line runs red → cyan. Default stops The line runs indigo → purple. Pink Picks up from the pink stop. ### Dashes and icons [#dashes-and-icons] Dashes are cut out of the line with a mask, so a dashed segment still blends. A custom `bullet` replaces only the dot's content — the line still follows the item's `color`, `variant` and state. libft Solid, green → brand. ft\_printf Dashed below, brand → brand. get\_next\_line Dashed below, brand → the active dot. minishell Active. philosophers Pending. ## Progress [#progress] Pass `active` — the index of the current step among the `Timeline.Item`s — to turn a timeline into progress. Steps up to and including it render as usual, and the active one gets `aria-current="step"`. Steps after it are pending: every variant switches to the palette's disabled colors (colored ones included), a `default` dot shrinks to its bare outer ring, and a `gradient` flattens. Each item exposes its state as `data-state` (`complete`, `active` or `pending`) for your own styling. ### Marking the active item [#marking-the-active-item] When the data already knows which entry is current, pass `active` on that `Timeline.Item` instead of computing an index. An item's `active` overrides the root's; if several items pass it, the first one wins, and `active={false}` is the same as leaving it unset. Application Piscine Common Core Marked on the item — overrides the root. Specialization ### Out of range [#out-of-range] An index past the last step marks every step complete; a negative one marks every step pending. Leave `active` unset on both levels for a plain event list — nothing dims, and the line between `default` dots is their own fill. Joined the campus Met the cohort First project The short stretch `axisOffset` opens above a shifted bullet is drawn in that bullet's own entry color — see [Gradient with axisOffset](#gradient-with-axisoffset). ## Dashed bullet [#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. Evaluated Evaluation scheduled Waiting for a slot ## Gradient [#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). Bocal member Blackhole warning ## Gradient with axisOffset [#gradient-with-axisoffset] `axisOffset` works the same regardless of `variant` — it only moves the bullet+line column, never the color. The connector above the shifted bullet still blends all the way into it, and the short stretch `axisOffset` opens above the bullet is drawn in that bullet's own entry color — for a gradient, its `from` stop — so the line meets it with no seam. ft_transcendence In progress — gradient bullet aligned to this title via axisOffset. Common Core completed ## Dashed line [#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. Dashes are cut out of the line with a mask, so a dashed segment still blends between its two items' colors.
libft pushed Awaiting evaluation ft_printf validated minitalk in evaluation pipex
## Density [#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.
Compact (sm) Common Core project Roomy (lg) Common Core project
Piscine started — bigger dot, same line and spacing Common Core project ## Course roadmap [#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. `active={0}` marks the first card as the current step: it keeps a larger, ringed `default` bullet and a brighter card border, while the upcoming steps render as small pending rings next to 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.
Shell Fundamentals Available
Learn the basics of using the shell, a command-line interpreter that allows you to interact with your operating system.
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.
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. Exam 00 Exam details will soon be available.
Square
## Subcomponents [#subcomponents] Every part renders `testId` as `data-testid` on its own DOM node — see [Testing](/docs/testing). ## API [#api] ### Timeline [#timeline] ### Timeline.Item [#timelineitem]