Koori UI
Components

GlassTimeline

A vertical list of events with colored status markers.

Preview

  1. Deploy succeeded

    10:24 AM

    Production build deployed without errors.

  2. Build started

    10:18 AM

    CI pipeline triggered from main branch.

  3. Memory usage high

    09:55 AM

    Usage peaked at 87% for 2 minutes.

  4. Deploy failed

    09:30 AM

    TypeScript errors blocked the build.

Usage

import { GlassTimeline, GlassTimelineItem } from "koori-ui";
 
<GlassTimeline>
  <GlassTimelineItem
    time="10:24 AM"
    title="Deploy succeeded"
    description="Production build deployed without errors."
    status="success"
  />
  <GlassTimelineItem
    time="09:30 AM"
    title="Deploy failed"
    description="TypeScript errors blocked the build."
    status="error"
  />
</GlassTimeline>

Props

GlassTimeline

Extends native <ol> props. No additional props.

GlassTimelineItem

PropTypeDefaultDescription
titlestring—Event title (required)
descriptionstring—Supporting text
timestring—Timestamp shown on the right
status"default" | "success" | "warning" | "error""default"Marker color
iconReactNode—Icon rendered inside the marker

All native <li> props are also accepted on items.

Previous

GlassSpinner

Next

GlassToggle

On this page