Photo of Julien Thibeaut or Ibelick

Julien Thibeaut

Design Engineer

Back to Lab

Timeline

May 2024

I call this a timeline component, but it can be used for many other purposes. For example, you can use it for navigation or as a progress indicator. I saw this kind of design on press.stripe.com and more recently on daylightcomputer.com. I've also seen @rauno exploring this kind of design on X.

Unlock code snippet

Enter your email to access all code snippets and subscribe to my newsletter for updates.

import { useState } from "react";
import Button from "./ui/Button";


// Nice try! I promise I won't send you a tons of spam emails


const INIT = "INIT";
const SUBMITTING = "SUBMITTING";
const ERROR = "ERROR";
const SUCCESS = "SUCCESS";


const formStates = [INIT, SUBMITTING, ERROR, SUCCESS] as const;




function NewsletterForm() {
  return (
    <form>
      <input type="email" placeholder="
        Enter your email" />
        <Button type="submit">Subscribe</Button>
        </form>
        );
    }
}

References:

Run Stats Stacks
3D Photo Carousel n°2