Timeline

Lista vertical de eventos en el tiempo para historial editorial, audit trail y changelogs. Cada TimelineItem admite tono semántico, icono personalizado, título, descripción y marca temporal.

  1. Región de Rinascita disponible para todos los jugadores.
  2. 450 k jugadores invitados.
  3. Latencia elevada en eu-west-1. Resuelto.
  4. Incidencia en loginhace 5 días

Instalación#

bash
pnpm add @tsukira/ui

Uso#

tsx
import { Timeline, TimelineItem } from "@tsukira/ui"; <Timeline>  <TimelineItem tone="success" title="Publicado" timestamp="2026-05-20 14:30">    Ana López publicó el artículo en producción.  </TimelineItem>  <TimelineItem title="Revisión" timestamp="2026-05-20 11:15">    Bruno Díaz aprobó la edición.  </TimelineItem>  <TimelineItem tone="warning" title="Cambios solicitados" timestamp="2026-05-19 18:00" /></Timeline>

Ejemplos#

Playground

cambia las props y el código se regenera
  1. Región de Rinascita disponible.
  2. Revisión aprobadaayer
  3. Cambios solicitadoshace 3 días

size

tone (primer item)

Tonos semánticos

neutral · brand · success · warning · danger · info
  1. Desplegado14:30
  2. Beta publicada11:00
  3. Mantenimiento09:15
  4. Degradadoayer
  5. Incidenciahace 2 días
  6. Registro inicialhace 1 semana

Con icono personalizado

icon — reemplaza el dot por cualquier ReactNode
  1. ✓
    Pago confirmadoStripe procesó el cargo correctamente.15:42
  2. 📦
    Pedido enviadoEnviado con MRW — nº 4892031.10:00
  3. 🛒
    Pedido recibidoayer

Tamaños

sm · md (default) · lg
  1. sm — Parche14:30
  2. sm — Beta11:00
  1. md — Parche14:30
  2. md — Beta11:00
  1. lg — Parche14:30
  2. lg — Beta11:00

Fusión: historial de pedido en Card

Timeline dentro de una Card — seguimiento de estado de un envío
Pedido #PED-20048

Seguimiento de envío

En tránsito
  1. 🚚
    En repartoÚltima posición: Madrid — centro de distribución.Hoy 08:14
  2. 📦
    Salida de almacénEl pedido ha salido del almacén de Valencia.Ayer 22:30
  3. ✓
    Pago confirmadoStripe procesó el cargo de 89,90 €.Ayer 10:05
  4. 🛒
    Pedido recibidoAyer 10:00

Fusión: audit trail con Avatar (quién hizo qué)

TimelineItem.children personalizado con Avatar + texto
  1. AL
    Ana LópezPublicó el artículo en producción.
  2. BD
    Bruno DíazAprobó los cambios de la revisión final.
  3. CR
    Carla RuizSolicitó cambios en el borrador.

API#

TimelinePropsextends Omit<HTMLAttributes<HTMLOListElement>, 'children'>
PropTipoDefaultDescripción
size'sm' | 'md' | 'lg'—Tamaño del componente.
children*ReactNode—Items `<TimelineItem>`.
TimelineItemPropsextends Omit<LiHTMLAttributes<HTMLLIElement>, 'title'>
PropTipoDefaultDescripción
tone'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info'—Tono del item — afecta el indicador (dot) y el conector.
iconReactNode—Icono custom en lugar del dot.
titleReactNode—Título del item (línea principal).
descriptionReactNode—Descripción / detalle (línea secundaria).
timestampReactNode—Marca temporal del evento (puede ser string formateado o `<time>`).
childrenReactNode—Contenido custom — si se pasa, reemplaza title/description/timestamp.