Server Component · 0 KB client JS

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>
  );
}

Order placedConfirmed at 2:30 PM

In transitLeft the depot

variant

size

colorScheme

import { Timeline } from "astralis-ui";

<Timeline>
  <Timeline.Item>
    <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 />
    <Timeline.Content>
      <Timeline.Title>In transit</Timeline.Title>
      <Timeline.Description>Left the depot</Timeline.Description>
    </Timeline.Content>
  </Timeline.Item>
</Timeline>

Import#

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

Usage#

Indicators take anything, whether 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`	`all 15 schemes`	`"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.