Timeline
Displays audit trails, status changes, and record activity in chronological order.
Default
A semantic activity feed for audit trails and record history.
- Invoice INV-2026-1042 createdAda Lovelace created the invoice for Acme Corporation.
- Invoice sentDelivered to accounts@acme.example.
- Payment received$12,480.00 was matched automatically.
tsx
<Timeline items={items} />Installation
tsx
import { Timeline } from "madagent";Semantic colors
Use semantic colors to distinguish informational, warning, success, and error events.
- Invoice INV-2026-1042 createdAda Lovelace created the invoice for Acme Corporation.
- Invoice sentDelivered to accounts@acme.example.
- Payment received$12,480.00 was matched automatically.
tsx
<Timeline items={[{ id: "paid", title: "Payment received", color: "positive" }]} />Dense
Dense mode stacks timestamps and reduces vertical spacing.
- Invoice INV-2026-1042 createdAda Lovelace created the invoice for Acme Corporation.
- Invoice sentDelivered to accounts@acme.example.
- Payment received$12,480.00 was matched automatically.
tsx
<Timeline items={items} dense />Props
| Prop | Type | Default | Description |
|---|---|---|---|
items* | TimelineItem[] | - | Ordered audit or activity records |
dense | boolean | false | Reduces spacing and stacks timestamps |
RTL Support
Components automatically adapt to right-to-left languages using CSS logical properties.
Preview
- تم إنشاء الفاتورة
- تم إرسال الفاتورة
- تم استلام الدفعة
Usage
tsx
<Timeline items={[
{ id: "1", title: "تم إنشاء الفاتورة", timestamp: "اليوم، ٩:٣٠", color: "accent" },
{ id: "2", title: "تم استلام الدفعة", timestamp: "اليوم، ١١:١٨", color: "positive" },
]} />