@hdhub/gate-timeline

Human Design Gate Transition Timeline visualization component for React.

Live Demo

Installation

npm install @hdhub/gate-timeline

No Tailwind setup is required. The component ships with self-contained runtime styles.

Usage

import {
  DEFAULT_LOCALE_EN,
  GateTransitionTimeline,
  TIMELINE_THEME_ORANGE,
  type TimelineData,
} from "@hdhub/gate-timeline";

function App({ timelineData }: { timelineData: TimelineData }) {
  return (
    <GateTransitionTimeline
      timelineData={timelineData}
      selectedDate={new Date()}
      currentDayWidth={80}
      baseUtcOffset={9}
      theme={TIMELINE_THEME_ORANGE}
      locale={DEFAULT_LOCALE_EN}
      baseDatetime="2026-01-01T00:00:00+09:00"
      onSelectedOffsetChange={(offset) => console.log(offset)}
    />
  );
}

Theming

Built-in presets are exported:

• TIMELINE_THEME_ORANGE
• TIMELINE_THEME_PINK

Custom themes should use CSS color values such as #fb923c, rgba(...), hsl(...), or var(...).

License

UNLICENSED - All rights reserved.