Timeline

Storybook

Ordered sequences: histories and steppers

One component, two orientations. Vertical for histories and process narratives: career entries, project phases. Horizontal for compact steppers like a loop's run stages. Markers are dots by default, numbered circles with numbered, or Material Symbols per item. The company variant swaps the marker for a logo and groups one or more roles (each with a right-aligned date) under a single entry.

Vertical: a history

  1. May 2024 – PresentNorthlight, Staff Product Designer
    The conversational AI platform, from prototype to production sessions.
  2. Aug 2023 – May 2024Fieldnote, Lead Product Designer
    AI generation workflows for infrastructure planning: successful generations up sharply.
  3. 2021 – 2023Acme, Product Designer
    Profile and offer-creation platforms for global recruiting.

Vertical: numbered steps

  1. Pull analytics
  2. One hypothesis
  3. Rewrite on a branch
  4. Approval

With icons

  1. Pull analytics
    Read GA4, filter bot noise.
  2. Rewrite on a branch
    One copy-shaped change per run.
  3. Approval
    A human approves every merge.

Horizontal stepper

  1. Pull analytics
  2. One hypothesis
  3. Rewrite on a branch
  4. Approval

Company: grouped roles

  1. Northlight

    Principal Product Designer

    Jan 2026 – Present

    Consumer AI

    • Shipped the embedded assistant experiences inside ChatGPT and Claude.
    • Designed the bidirectional review checklist (full story in the templates)

    Principal Product Designer

    May 2024 – Jan 2026

    Agent Platform

    • Led design of the end-to-end conversational AI platform.
    • Scaled to dozens of agents in production.
  2. Fieldnote

    Principal Product Designer

    Aug 2023 – May 2024

    Led end-to-end UX for a 0→1 generative AI tool for infrastructure planning.

    • Cut time-to-value from weeks to days.
    • Reduced anomalies per output sharply.
tsx
// From the npm package
import { Timeline } from 'rift-ds/components/Timeline/Timeline';

// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/timeline.json