Timeline
Chronological event list with 5 semantic variants, timestamps and animated connector line.
TypeScript
import { NeuTimelineComponent } from '@neural-ui/core/timeline';Recent activity
- 1. Order confirmed · 2 min ago
Your order #NU-2024-001 has been successfully registered.
- 2. Payment processed · 5 min ago
Payment of €89.99 processed via card •••• 4242.
- 3. Low stock · 1h ago
Item "Angular Pro Kit" has only 3 units left.
- 4. Shipment failed · Yesterday
Package could not be delivered. Retry tomorrow.
- 5. New user registered · 12 Mar
juan@example.com joined the platform.
Release history
- v3.0.0 — Signals APIMar 2025
Full rewrite with signals and zoneless.
- v2.5.0 — New componentsJan 2025
Accordion, Timeline, Stepper & Toolbar
- v2.0.0 — Design TokensOct 2024
CSS token system for advanced theming.
- v1.0.0 — First releaseJun 2024
Initial launch with 8 components.
TypeScript
import { NeuTimelineComponent, NeuTimelineItem } from '@neural-ui/core/timeline';
@Component({
imports: [NeuTimelineComponent],
template: `<neu-timeline [items]="events" />`
})
export class MyComponent {
events: NeuTimelineItem[] = [
{ title: 'Order confirmed', description: '...', time: '2 min ago', variant: 'success' },
{ title: 'Payment processed', description: '...', time: '5 min ago', variant: 'info' },
{ title: 'Shipment failed', description: '...', time: 'Yesterday', variant: 'danger' },
];
}