> From [PageWeave Design](https://pageweave-design.pageweave.site) — a working library for agentic web development. Full index: [llms.txt](https://pageweave-design.pageweave.site/llms.txt)

# Timeline

Vertical milestones with mono markers

- Category: Components
- Tags: timeline history steps process

## Usage

Milestones, changelog highlights, process steps. A hairline left spine with square markers keeps it editorial; round markers push it playful.

## Rules

- Marker squares sit on the spine: `-left-[5px]` centers a 10px square on a 1px border.
- Latest/active milestone gets `bg-primary`; past ones stay neutral at 30%.
- Last item drops the spine (`border-l-0`) so the line doesn't dangle.
- Dates in mono caps; titles in the display face; descriptions one line each.
- For long timelines add scroll-reveal stagger (80ms per item).

## HTML source

```html
<ul class="max-w-lg mx-auto space-y-0">
  <li class="relative pl-8 pb-8 border-l border-base-content/15 ml-2">
    <span class="absolute -left-[5px] top-1 w-2.5 h-2.5 bg-primary"></span>
    <p class="font-mono text-xs tracking-[0.12em] text-base-content/50">2026 · Q1</p>
    <h4 class="mt-1 text-lg font-medium tracking-tight" style="font-family:'Fraunces',serif">Library opens</h4>
    <p class="text-sm text-base-content/70 mt-1">First 40 items: styles, themes, and the core guides.</p>
  </li>
  <li class="relative pl-8 pb-8 border-l border-base-content/15 ml-2">
    <span class="absolute -left-[5px] top-1 w-2.5 h-2.5 bg-base-content/30"></span>
    <p class="font-mono text-xs tracking-[0.12em] text-base-content/50">2026 · Q2</p>
    <h4 class="mt-1 text-lg font-medium tracking-tight" style="font-family:'Fraunces',serif">Collections launch</h4>
    <p class="text-sm text-base-content/70 mt-1">Curated stacks that cross categories.</p>
  </li>
  <li class="relative pl-8 pb-2 border-l-0 ml-2">
    <span class="absolute -left-[5px] top-1 w-2.5 h-2.5 bg-base-content/30"></span>
    <p class="font-mono text-xs tracking-[0.12em] text-base-content/50">2026 · Q3</p>
    <h4 class="mt-1 text-lg font-medium tracking-tight" style="font-family:'Fraunces',serif">Community submissions</h4>
    <p class="text-sm text-base-content/70 mt-1">The contribute form goes public.</p>
  </li>
</ul>
```