heroatomix/ui
Documentation
Components
Roadmap

Roadmap Component

A dynamic roadmap component with animated scroll effects and interactive progress cards.

Mihir (OPM)

Written by Mihir (OPM)

Roadmap

rocket

The Birth (MVP)

In this phase, we would’ve raised our pre-seed round to give us the necessary resources to achieve our goals

rocket

Extended Capabilities (Beta)

During this phase, we would’ve listed on a reputable CEX via their official launchpad/pools channel, giving the project more exposure to all the user groups we want to serve.

rocket

Extended Capabilities (Beta)

During this phase, we would’ve listed on a reputable CEX via their official launchpad/pools channel, giving the project more exposure to all the user groups we want to serve.

The Roadmap component presents project phases with interactive cards. Each card rotates dynamically based on scroll progress, making it ideal for showcasing project timelines or milestone achievements.

Installation

Examples

Roadmap

rocket

The Birth (MVP)

In this phase, we would’ve raised our pre-seed round to give us the necessary resources to achieve our goals

rocket

Extended Capabilities (Beta)

During this phase, we would’ve listed on a reputable CEX via their official launchpad/pools channel, giving the project more exposure to all the user groups we want to serve.

rocket

Extended Capabilities (Beta)

During this phase, we would’ve listed on a reputable CEX via their official launchpad/pools channel, giving the project more exposure to all the user groups we want to serve.

Props

PropTypeDescriptionDefault
indexnumberThe index of the card (used for scroll animation)-
logoSrcstringPath to the logo image used in the card-
logoAltstringAlt text for the logo image-
titlestringThe title of the phase or milestone-
descriptionstringA short description of the phase or milestone-
backgroundstringThe background style (e.g., gradient or solid color) for the card-

Basic Usage

import { Roadmap, RoadmapCard } from "@/components/roadmap";
 
export default function Example() {
  return (
    <Roadmap>
      <Roadmap.Card
        index={1}
        logoSrc="logo1"
        logoAlt="Logo 1"
        title="Phase 1"
        description="Initial project setup and foundational planning."
        background="linear-gradient(to right, #FF7E5F, #FEB47B)"
      />
      <Roadmap.Card
        index={2}
        logoSrc="logo2"
        logoAlt="Logo 2"
        title="Phase 2"
        description="Development of core features and testing."
        background="linear-gradient(to right, #6A11CB, #2575FC)"
      />
    </Roadmap>
  );
}