Vertical step tracker for orders, shipping and onboarding. Each completed step fills the line down to the next point, and a soft glow marks the step in progress.

Preview

TSX components/ui/timeline/timeline.tsx

Pro source · 336 lines

Part of LumioUI Pro. With Pro, the full file shows here and npx @lumioui/cli add pro/timeline writes it into your repo. Unlocking your Pro source… Couldn't load the source. Refresh to try again.

See Pro Log in

Upgrade to Pro

TSX example.tsx

import { Timeline } from "@/components/ui/timeline/timeline";

export function Example() {
  return (
    <Timeline />
  );
}

Installation

$npx @lumioui/cli add pro/timeline

Install the dependencies
npx expo install react-native-reanimated
Add the components it builds on
icon text
Copy the source from the Code tab into your project
components/ui/timeline/timeline.tsxcomponents/ui/timeline/index.ts
Update the import paths to match your project setup.

Usage

import { Timeline } from "@/components/ui/timeline/timeline";

<Timeline />

Examples

Train journey

The stop list of a train ticket (travel → teal).

$npx @lumioui/cli add pro/timeline-journey

TSX components/ui/timeline/variants/journey.tsx

Pro source · 62 lines

Part of LumioUI Pro. With Pro, the full file shows here and npx @lumioui/cli add pro/timeline-journey writes it into your repo. Unlocking your Pro source… Couldn't load the source. Refresh to try again.

See Pro Log in

Upgrade to Pro

Order tracking

A parcel tracker in ink.

$npx @lumioui/cli add pro/timeline-order

TSX components/ui/timeline/variants/order.tsx

Pro source · 114 lines

Part of LumioUI Pro. With Pro, the full file shows here and npx @lumioui/cli add pro/timeline-order writes it into your repo. Unlocking your Pro source… Couldn't load the source. Refresh to try again.

See Pro Log in

Upgrade to Pro