Timeline
Tier 2: Light-DOMAccessible event stream and workflow step timeline with glowing radar beacon status and dark glass cards
All-In-One Architecture Advantage: The <ui-timeline> component operates strictly in the Light DOM. It eliminates Shadow DOM encapsulation barriers, supports seamless global styling (Tailwind CSS / design tokens), and integrates natively across React 19, Vue 3, Svelte 5, Astro, and SSR frameworks.
$npx nnuikit add timeline
copy$npm install nnui-kit
copyInteractive Preview & Code
10:30 AM
Database Schema Migration
Applied v1.4 migration scripts across production clusters.
10:45 AM
Virtual Machine Deployment
Spinning up worker nodes and syncing edge cache.
11:00 AM
Health Check & Traffic Shift
Automated canary verification and blue/green traffic cutover.
<ui-timeline active-step="1">
<div data-part="item" data-status="completed">
<span data-part="marker"></span>
<span data-part="connector"></span>
<div data-part="content">
<span data-part="time">10:30 AM</span>
<h5 data-part="title">Database Schema Migration</h5>
<p data-part="description">Applied v1.4 migration scripts across production clusters.</p>
</div>
</div>
<div data-part="item" data-status="active">
<span data-part="marker"></span>
<span data-part="connector"></span>
<div data-part="content">
<span data-part="time">10:45 AM</span>
<h5 data-part="title">Virtual Machine Deployment</h5>
<p data-part="description">Spinning up worker nodes and syncing edge cache.</p>
</div>
</div>
<div data-part="item" data-status="pending">
<span data-part="marker"></span>
<div data-part="content">
<span data-part="time">11:00 AM</span>
<h5 data-part="title">Health Check & Traffic Shift</h5>
<p data-part="description">Automated canary verification and blue/green traffic cutover.</p>
</div>
</div>
</ui-timeline>
import React from 'react';
import 'nnuikit/css';
import { Timeline } from 'nnuikit/react';
export default function TimelineDemo() {
return (
<Timeline activeStep={1}>
<Timeline.Item data-status="completed">
<Timeline.Marker />
<Timeline.Connector />
<Timeline.Content>
<Timeline.Time>10:30 AM</Timeline.Time>
<Timeline.Title>Database Schema Migration</Timeline.Title>
<Timeline.Description>Applied v1.4 migration scripts across production clusters.</Timeline.Description>
</Timeline.Content>
</Timeline.Item>
<Timeline.Item data-status="active">
<Timeline.Marker />
<Timeline.Connector />
<Timeline.Content>
<Timeline.Time>10:45 AM</Timeline.Time>
<Timeline.Title>Virtual Machine Deployment</Timeline.Title>
<Timeline.Description>Spinning up worker nodes and syncing edge cache.</Timeline.Description>
</Timeline.Content>
</Timeline.Item>
<Timeline.Item data-status="pending">
<Timeline.Marker />
<Timeline.Content>
<Timeline.Time>11:00 AM</Timeline.Time>
<Timeline.Title>Health Check & Traffic Shift</Timeline.Title>
<Timeline.Description>Automated canary verification and blue/green traffic cutover.</Timeline.Description>
</Timeline.Content>
</Timeline.Item>
</Timeline>
);
}
<script setup>
import 'nnuikit/css';
import 'nnuikit/client';
</script>
<template>
<ui-timeline active-step="1">
<div data-part="item" data-status="completed">
<span data-part="marker"></span>
<div data-part="content">
<span data-part="time">10:30 AM</span>
<h5 data-part="title">Database Schema Migration</h5>
<p data-part="description">Applied v1.4 migration scripts.</p>
</div>
</div>
</ui-timeline>
</template>
<script>
import 'nnuikit/css';
import 'nnuikit/client';
</script>
<ui-timeline active-step="1">
<div data-part="item" data-status="completed">
<span data-part="marker"></span>
<div data-part="content">
<span data-part="time">10:30 AM</span>
<h5 data-part="title">Database Schema Migration</h5>
<p data-part="description">Applied v1.4 migration scripts.</p>
</div>
</div>
</ui-timeline>
How to Utilize
NNUI-KIT components live directly in the document Light DOM. You can use them via declarative HTML, with our first-class React wrapper, or platform-natively in Svelte, Vue, Astro, and HTMX:
React 18 & 19 (Next.js 15 App Router)
import 'nnuikit/css';
import 'nnuikit/client';
import { Timeline } from 'nnuikit/react';
Universal Web Components (Vue 3, Svelte 5, Astro, HTMX)
<!-- Automatically registers <ui-timeline> and <nnui-timeline> -->
import 'nnuikit/css';
import 'nnuikit/client';
Platform Features
Zero Shadow DOM
Element lives in the Light DOM. Tailwind and global CSS apply directly.
persist="url | local"
Add declarative persistence attribute to auto-sync state with URL search params.
sync="cross-tab"
Synchronize changes across all open browser tabs via BroadcastChannel.
