Timeline

A vertical sequence of events with indicators, connectors and per-item colors.

Order placedConfirmed at 2:30 PM

In transitLeft the warehouse this morning

DeliveryExpected Thursday

"use client";

import { Timeline, Icon, Box } from "astralis-ui";
import { Check, Truck, Package } from "lucide-react";

export function TimelineDemo() {
  return (
    <Box w="full" maxW="xs">
      <Timeline>
        <Timeline.Item>
          <Timeline.Indicator colorScheme="green">
            <Icon as={Check} size="xs" />
          </Timeline.Indicator>
          <Timeline.Content>
            <Timeline.Title>Order placed</Timeline.Title>
            <Timeline.Description>Confirmed at 2:30 PM</Timeline.Description>
          </Timeline.Content>
        </Timeline.Item>
        <Timeline.Item>
          <Timeline.Indicator>
            <Icon as={Truck} size="xs" />
          </Timeline.Indicator>
          <Timeline.Content>
            <Timeline.Title>In transit</Timeline.Title>
            <Timeline.Description>Left the warehouse this morning</Timeline.Description>
          </Timeline.Content>
        </Timeline.Item>
        <Timeline.Item>
          <Timeline.Indicator colorScheme="gray">
            <Icon as={Package} size="xs" />
          </Timeline.Indicator>
          <Timeline.Content>
            <Timeline.Title>Delivery</Timeline.Title>
            <Timeline.Description>Expected Thursday</Timeline.Description>
          </Timeline.Content>
        </Timeline.Item>
      </Timeline>
    </Box>
  );
}

Import#

import { Timeline } from "astralis-ui";
// Timeline.Item, .Indicator, .Content, .Title, .Description

Usage#

Indicators take anything — numbers, icons, or nothing (a plain dot) — and colorScheme on an individual indicator overrides the root's, which is how the completed step above turns green.

Variants and sizes#

solid

First

Second

subtle

First

Second

outline

First

Second

"use client";

import { Timeline, Text, HStack, VStack } from "astralis-ui";

const variants = ["solid", "subtle", "outline"] as const;

export function TimelineVariants() {
  return (
    <HStack gap="8" alignItems="start" wrap="wrap" justifyContent="center">
      {variants.map((variant) => (
        <VStack key={variant} gap="2" alignItems="start">
          <Text as="span" size="xs" color="muted">{variant}</Text>
          <Timeline variant={variant} size="sm">
            <Timeline.Item>
              <Timeline.Indicator>1</Timeline.Indicator>
              <Timeline.Content>
                <Timeline.Title>First</Timeline.Title>
              </Timeline.Content>
            </Timeline.Item>
            <Timeline.Item>
              <Timeline.Indicator>2</Timeline.Indicator>
              <Timeline.Content>
                <Timeline.Title>Second</Timeline.Title>
              </Timeline.Content>
            </Timeline.Item>
          </Timeline>
        </VStack>
      ))}
    </HStack>
  );
}

Props#

Prop	Type	Default	Description
`variant`	`"solid" \| "subtle" \| "outline"`	`"solid"`	Indicator fill style.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Indicator diameter and text scale.
`colorScheme`	`"brand" \| "gray" \| "red" \| "green" \| "blue" \| "purple"`	`"brand"`	Default indicator hue; overridable per Indicator.

Connector lines render automatically between items and are hidden after the last one. Empty indicators are aria-hidden decorative dots.