Timeline

Línea de tiempo vertical con íconos, fechas y variantes de color.

pnpm dlx nuvo-ui add timeline

Básico

  1. Cuenta creada

    El usuario completó el registro.

  2. Plan actualizado

    Cambio de Free a Pro.

  3. Pago fallido

    Tarjeta rechazada — pendiente de update.

  4. Pago recuperado

    Se actualizó el método de pago.

  5. Solicitud de soporte

    Ticket #4821 abierto.

Con íconos custom

  1. v1.0 — Lanzamiento

    Primera versión pública de NuvoUI.

  2. v1.5 — DataGrid

    Nuevo componente de tabla avanzada.

  3. v2.0 — Chart & Filter

    Gráficos y filtros dinámicos agregados.

  4. v2.5 — 19 componentes

    Librería completa con Stepper, Toast y más.

Uso

import { Timeline } from "@nuvo-ui/ui"

<Timeline items={[
  {
    title:       "Evento 1",
    description: "Descripción del evento.",
    date:        "Ene 2024",
    variant:     "success",   // "default" | "success" | "warning" | "error"
  },
  {
    title: "Con ícono custom",
    icon:  <StarIcon />,      // ReactNode personalizado
    date:  "Feb 2024",
  },
]} />

Props — TimelineItem

PropTipoDefaultDescripción
titlestring—Título del evento
descriptionstring—Descripción del evento
datestring—Fecha o etiqueta de tiempo
iconReactNode—Ícono personalizado en el dot
variant"default" | "success" | "warning" | "error""default"Color del dot