sebs7n-ui

Contenido y datosServer Component

import { Timeline, TimelineGroup, TimelineItem } from "sebs7n-ui/timeline"

Ejemplos

Actividad de una factura

Título en 17, detalle en 14 gris, la hora a la derecha y el punto del color del evento, unidos por una línea. Los días van con la cabecera de grupo de Drive.

import { BellIcon, MailIcon } from "lucide-react"
import { Button } from "sebs7n-ui"
import { Timeline, TimelineGroup, TimelineItem } from "sebs7n-ui/timeline"

function Basico() {
  return (
    <Timeline aria-label="Actividad de la factura A-0012" className="w-full max-w-md">
      <TimelineGroup title="Hoy">
        <TimelineItem dateTime="2026-09-29T16:40" description="Transferencia de Acme S.A. · $ 128.400" dot="green" time="16:40" title="Pago recibido" />
        <TimelineItem dateTime="2026-09-29T09:05" description="Vence el 30 de septiembre" icon={<BellIcon />} time="09:05" title="Recordatorio enviado" />
      </TimelineGroup>
      <TimelineGroup title="Lunes 28 de septiembre">
        <TimelineItem
          actions={
            <Button size="sm" variant="plain">
              Reenviar
            </Button>
          }
          dateTime="2026-09-28T18:22"
          description="La casilla pagos@acme.example no existe"
          dot="red"
          time="18:22"
          title="El correo rebotó"
        />
        <TimelineItem dateTime="2026-09-28T18:20" description="A pagos@acme.example" icon={<MailIcon />} time="18:20" title="Factura enviada" />
        <TimelineItem dateTime="2026-09-28T18:12" description="A-0012 · $ 128.400" dot="brand" time="18:12" title="Factura emitida" />
      </TimelineGroup>
    </Timeline>
  )
}

Props

Generadas del TypeScript del paquete. Las propias del componente, más las heredadas del primitivo que tienen algo que explicar —marcadas «heredada de Base UI»—. El resto está en la línea «hereda de».

Timeline

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—	Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana.

TimelineGroup

Hereda las props de <li>.

Prop	Tipo	Por defecto	Descripción
`title`*	`React.ReactNode`	—	El día, en 19/600. Nombra la lista de adentro.
`className`	`string`	—	Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana.

TimelineItem

Hereda las props de <li>.

Prop	Tipo	Por defecto	Descripción
`title`*	`React.ReactNode`	—	Qué pasó, en 17.
`actions`	`React.ReactNode`	—	Botones o links debajo del detalle.
`dateTime`	`string`	—	La fecha en formato de máquina para el `<time>`.
`description`	`React.ReactNode`	—	El detalle, en 14 gris.
`dot`	`"brand" \| "gray" \| "red" \| "amber" \| "green" \| "blue" \| "teal" \| "purple" \| "pink"`	`"gray"`	El color del punto (la paleta de `Badge`). Por defecto, gris.
`icon`	`React.ReactNode`	—	Un ícono en lugar del punto, en un círculo de 24.
`time`	`React.ReactNode`	—	La hora o la fecha que se ve, a la derecha.
`className`	`string`	—	Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana.

Teclado

Tab: Solo recorre lo interactivo de adentro (las acciones): la lista en sí no es un control.

Accesibilidad

Es una <ol>: nombre obligatorio con aria-label («Actividad de la factura A-0012»). El lector cuenta los eventos.
Cada día (TimelineGroup) tiene su propia lista, nombrada por la cabecera.
La hora es un <time> con dateTime en formato de máquina: pasalo, que «10:12» solo no dice de qué día.
El punto, el ícono y la línea son decorativos (aria-hidden): el tipo de evento tiene que estar en el título, no solo en el color.

Reglas de uso

Para el historial de algo: la actividad de una factura, los cambios de un cliente, los pagos de una cuenta. Para una lista que se elige o se abre, List.
El orden lo decide la app (lo más nuevo arriba es lo usual); la línea une los eventos en el orden del DOM.
dot con la paleta de Badge para el tipo de evento (verde pagado, rojo error), icon cuando el tipo se lee mejor con un glifo.
Sin estado: va en un Server Component. Solo por subpath (sebs7n-ui/timeline).

Relacionados

ListRow Badge