Skip to content
GitHub

Timescale

Ruler-style timeline for plotting milestones along a horizontal or vertical axis.

Chánh Đại

0

2000

Born in Can Tho, Viet Nam.

1

2001

2

2002

3

2003

4

2004

5

2005

6

2006

Started at Thuan Hung Primary School.

7

2007

8

2008

9

2009

10

2010

11

2011

Started at Thuan Hung Secondary School.

12

2012

13

2013

14

2014

Started learning to code and built my first website.

Visited Ha Noi, the capital, for the first time.

15

2015

Won awards:

  • 3rd Prize — Can Tho City Young Informatics Contest 2015

16

2016

Won awards:

  • Consolation Prize — Can Tho City Young Informatics Contest 2016

Visited Quy Nhon, Binh Dinh for the first time, and returned to Ha Noi.

17

2017

Won awards:

  • 2nd Prize — Can Tho City Outstanding Student Selection Exam 2016-2017
  • Consolation Prize — Can Tho City Young Informatics Contest 2017
  • Creative Award — Binh Duong Hackathon 2017

18

2018

Won awards:

  • 1st Prize — Can Tho City Science and Engineering Fair 2018
  • 3rd Prize — Can Tho City Outstanding Student Selection Exam 2017-2018

Began freelancing and joined Tung Tung as a UI/UX Designer.

19

2019

Became a Mobile Developer at Tung Tung.

Won 2nd Prize — Business Startup Competition 2019.

20

2020

Became a Web Developer at Tung Tung.

21

2021

22

2022

Joined Simplamo as a Senior Frontend Developer and UI Lead.

Launched — 80k+ downloads, 30k+ active users.

Won Bronze Medal — 10th Design, Manufacturing, and Application Award 2022.

23

2023

24

2024

Founded .

25

2025

Open-sourced — 2.2k+ stars on GitHub.

Released — 50k+ weekly downloads, selected for the .

Followed by on X.

26

2026

Joined as a Design Engineer.

Selected for the .

import { Markdown } from "@/components/ui/pxl/markdown";
import {
  TimescaleAge,
  TimescaleContent,
  TimescaleHeader,
  TimescaleIntroScroll,
  TimescaleItem,
  TimescaleRail,
  TimescaleRoot,
  TimescaleTick,
  TimescaleTrack,
  TimescaleViewport,
  TimescaleYear,
} from "@/components/ui/pxl/timescale";


const BIRTH_YEAR = 2000;


const MILESTONES: {
  year: number;
  content?: string;
}[] = [
  {
    year: 2000,
    content: "Born in Can Tho, Viet Nam.",
  },
  { year: 2001 },
  { year: 2002 },
  { year: 2003 },
  { year: 2004 },
  { year: 2005 },
  {
    year: 2006,
    content: "Started at Thuan Hung Primary School.",
  },
  { year: 2007 },
  { year: 2008 },
  { year: 2009 },
  { year: 2010 },
  {
    year: 2011,
    content: "Started at Thuan Hung Secondary School.",
  },
  { year: 2012 },
  { year: 2013 },
  {
    year: 2014,
    content: `Started learning to code and built my first website.


Visited Ha Noi, the capital, for the first time.`,
  },
  {
    year: 2015,
    content: `Won awards:


- 3rd Prize — Can Tho City Young Informatics Contest 2015
`,
  },
  {
    year: 2016,
    content: `Won awards:


- Consolation Prize — Can Tho City Young Informatics Contest 2016


Visited Quy Nhon, Binh Dinh for the first time, and returned to Ha Noi.`,
  },
  {
    year: 2017,
    content: `Won awards:


- 2nd Prize — Can Tho City Outstanding Student Selection Exam 2016-2017
- Consolation Prize — Can Tho City Young Informatics Contest 2017
- Creative Award — Binh Duong Hackathon 2017`,
  },
  {
    year: 2018,
    content: `Won awards:


- 1st Prize — Can Tho City Science and Engineering Fair 2018
- 3rd Prize — Can Tho City Outstanding Student Selection Exam 2017-2018


Began freelancing and joined Tung Tung as a UI/UX Designer.
`,
  },
  {
    year: 2019,
    content: `Became a Mobile Developer at Tung Tung.


Won 2nd Prize — Business Startup Competition 2019.`,
  },
  {
    year: 2020,
    content: "Became a Web Developer at Tung Tung.",
  },
  { year: 2021 },
  {
    year: 2022,
    content: `Joined Simplamo as a Senior Frontend Developer and UI Lead.


Launched [ZaDark](https://zadark.com) — 80k+ downloads, 30k+ active users.


Won Bronze Medal — 10th Design, Manufacturing, and Application Award 2022.`,
  },
  { year: 2023 },
  {
    year: 2024,
    content: "Founded [Quaric](https://quaric.com).",
  },
  {
    year: 2025,
    content: `Open-sourced [chanhdai.com](https://github.com/ncdai/chanhdai.com) — 2.2k+ stars on GitHub.


Released [React Wheel Picker](https://react-wheel-picker.chanhdai.com) — 50k+ weekly downloads, selected for the [Vercel OSS Program](https://vercel.com/open-source-program).


Followed by [shadcn](https://x.com/shadcn) on X.`,
  },
  {
    year: 2026,
    content: `Joined [shadcncraft](https://shadcncraft.com) as a Design Engineer.


Selected for the [Claude for Open Source Program](https://claude.com/contact-sales/claude-for-oss).`,
  },
];


export default function TimescaleDemo() {
  return (
    <TimescaleIntroScroll>
      <TimescaleRoot className="mt-4">
        <TimescaleHeader>
          <TimescaleAge>Age</TimescaleAge>
          <TimescaleYear>Years</TimescaleYear>
        </TimescaleHeader>


        <TimescaleViewport>
          <TimescaleTrack>
            <TimescaleRail />


            {MILESTONES.map((milestone) => (
              <TimescaleItem key={milestone.year}>
                <TimescaleTick />


                <TimescaleAge>{milestone.year - BIRTH_YEAR}</TimescaleAge>
                <TimescaleYear>{milestone.year}</TimescaleYear>


                {milestone.content && (
                  <TimescaleContent>
                    <Markdown>{milestone.content}</Markdown>
                  </TimescaleContent>
                )}
              </TimescaleItem>
            ))}
          </TimescaleTrack>
        </TimescaleViewport>
      </TimescaleRoot>
    </TimescaleIntroScroll>
  );
}

Installation

Section titled “Installation”
pnpm dlx shadcn@latest add pxl-ui/registry/timescale

Usage

Section titled “Usage”
import {
  TimescaleAge,
  TimescaleContent,
  TimescaleHeader,
  TimescaleIntroScroll,
  TimescaleItem,
  TimescaleRail,
  TimescaleRoot,
  TimescaleTick,
  TimescaleTrack,
  TimescaleViewport,
  TimescaleYear,
} from "@/components/ui/pxl/timescale";
<TimescaleIntroScroll>
  <TimescaleRoot>
    <TimescaleHeader>
      <TimescaleAge />
      <TimescaleYear />
    </TimescaleHeader>


    <TimescaleViewport>
      <TimescaleTrack>
        <TimescaleRail />


        <TimescaleItem>
          <TimescaleTick />
          <TimescaleAge />
          <TimescaleYear />
          <TimescaleContent />
        </TimescaleItem>
      </TimescaleTrack>
    </TimescaleViewport>
  </TimescaleRoot>
</TimescaleIntroScroll>

Composition

Section titled “Composition”

Use the following composition to build a Timescale

TimescaleRoot
├── TimescaleHeader
│   ├── TimescaleAge
│   └── TimescaleYear
└── TimescaleViewport
    └── TimescaleTrack
        ├── TimescaleRail
        └── TimescaleItem
            ├── TimescaleTick
            ├── TimescaleAge
            ├── TimescaleYear
            └── TimescaleContent

Wrap in TimescaleIntroScroll to scroll a horizontal Timescale to its latest item on mount, respecting prefers-reduced-motion.

API reference

Section titled “API reference”

TimescaleRoot

Section titled “TimescaleRoot”
Prop Type Default Description
orientation string "horizontal" | "vertical"