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 lol, I promise I will not send you a tons of spam emails// I just want to build a newsletter list to share my latest content with you 🥹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>);}}