Timeline Navigation

Navigation

Step-by-step timeline navigation with progress tracking.

Import

import { PixelTimelineNavigation, PixelTimelineStep, PixelTimelineSteps } from "@/components/ui/pixel/pixel-timeline-navigation"

Usage

Horizontal Timeline

AccountSetup account
ProfileAdd details
CompleteFinish setup

Vertical Timeline

StartBegin your journey
ProgressWorking on it
ReviewAlmost there
DoneAll complete

Component Source

Copy and paste the following code into your project at /src/components/ui/pixel/pixel-timeline-navigation.tsx

"use client";

import { cva, type VariantProps } from "class-variance-authority";
import { Check, Circle } from "lucide-react";
import * as React from "react";
import { cn } from "@/lib/utils";

const timelineNavigationVariants = cva(
  "relative flex items-center justify-between w-full",
  {
    variants: {
      orientation: {
        horizontal: "flex-row",
        vertical: "flex-col items-start",
      },
    },
    defaultVariants: {
      orientation: "horizontal",
    },
  },
);

const timelineStepVariants = cva(
  "relative flex items-center transition-none duration-0",
  {
    variants: {
      orientation: {
        horizontal: "flex-col",
        vertical: "flex-row",
      },
      status: {
        completed: "",
        current: "",
        upcoming: "",
      },
    },
    defaultVariants: {
      orientation: "horizontal",
      status: "upcoming",
    },
  },
);

const timelineIconVariants = cva(
  "flex items-center justify-center border-4 border-black dark:border-white font-bold transition-none duration-0",
  {
    variants: {
      status: {
        completed: "bg-green-500 text-white shadow-pixel",
        current:

// ... (more code below)

Props

PropTypeDefaultDescription
currentStepnumber-Current active step number
onStepClick(step: number) => void-Callback when step is clicked
orientation"horizontal" | "vertical""horizontal"Layout orientation
size"sm" | "md" | "lg""md"Size of step indicators

Examples

Horizontal Timeline

Basic horizontal timeline with 3 steps

Horizontal Timeline

AccountSetup account
ProfileAdd details
CompleteFinish setup

Vertical Timeline

StartBegin your journey
ProgressWorking on it
ReviewAlmost there
DoneAll complete

Vertical Timeline

Vertical layout with custom icons

Horizontal Timeline

AccountSetup account
ProfileAdd details
CompleteFinish setup

Vertical Timeline

StartBegin your journey
ProgressWorking on it
ReviewAlmost there
DoneAll complete

Different Sizes

Timeline with different size options

Horizontal Timeline

AccountSetup account
ProfileAdd details
CompleteFinish setup

Vertical Timeline

StartBegin your journey
ProgressWorking on it
ReviewAlmost there
DoneAll complete

Accessibility

This component is built with accessibility in mind, including proper ARIA attributes, keyboard navigation, and focus management.