Timeline

A sequence of dated events with a connecting rail.

Real use · company milestones

2021
Founded
2023
Seed round closed
2026
Shipped 1.0

Horizontal

Cart
Shipping
Payment

Using Timeline

Silica ships one design system through three paths. They share a class vocabulary but are not interchangeable — pick the one that matches what you are building.

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path is complete for Timeline — it needs no JavaScript, so the classes below are the whole story.

/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";

Root class timeline, with 6 modifiers:

.timeline
.timeline-box
.timeline-dot
.timeline-end
.timeline-horizontal
.timeline-middle
.timeline-start

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-react

import { Timeline } from "@wizeworks/silicaui-react";

Props

TimelineProps

Prop	Type	Required	Description
orientation	TimelineOrientation	no	vertical (default) or horizontal.

TimelineEndProps

Prop	Type	Required	Description
box	boolean	no	Wrap the content in a bordered card.

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

Show source

import {
    Timeline,
    TimelineItem,
    TimelineStart,
    TimelineMiddle,
    TimelineEnd,
} from "@wizeworks/silicaui-react";
import { Section } from "../lib/Section";

export function TimelineDemo() {
    return (
        <>
            <Section title="Real use · company milestones">
                <Timeline className="max-w-md">
                    <TimelineItem>
                        <TimelineStart>2021</TimelineStart>
                        <TimelineMiddle />
                        <TimelineEnd box>Founded</TimelineEnd>
                    </TimelineItem>
                    <TimelineItem>
                        <TimelineStart>2023</TimelineStart>
                        <TimelineMiddle />
                        <TimelineEnd box>Seed round closed</TimelineEnd>
                    </TimelineItem>
                    <TimelineItem>
                        <TimelineStart>2026</TimelineStart>
                        <TimelineMiddle />
                        <TimelineEnd box>Shipped 1.0</TimelineEnd>
                    </TimelineItem>
                </Timeline>
            </Section>

            <Section title="Horizontal">
                <Timeline orientation="horizontal" className="max-w-lg">
                    <TimelineItem>
                        <TimelineStart>Cart</TimelineStart>
                        <TimelineMiddle />
                    </TimelineItem>
                    <TimelineItem>
                        <TimelineStart>Shipping</TimelineStart>
                        <TimelineMiddle />
                    </TimelineItem>
                    <TimelineItem>
                        <TimelineStart>Payment</TimelineStart>
                        <TimelineMiddle />
                    </TimelineItem>
                </Timeline>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

Timeline — a <ul class="timeline"> of events (marker + content per item). Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.

npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviors

import { atom, toHtml } from "@wizeworks/silicaui-html";

const node = atom("Timeline", "timeline", { /* props */ });
const markup = toHtml(node);

Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "timeline timeline-primary" rather than passing a colour as a prop.

Takes children: no
Hydrated by: nothing — this one is static markup

The full API for Timeline, on every path, is available through the Silica MCP server.