Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Timeline

Display a chronological sequence of events with indicators and content blocks.

Usage
Order placed
Your order has been confirmed.
Shipped
Package is on the way.
example.blade.php 
<x-slate::timeline>
    <x-slate::timeline-item>
        <x-slate::timeline-indicator>
            <span class="size-2 rounded-full bg-primary"></span>
        </x-slate::timeline-indicator>
        <x-slate::timeline-content>
            <x-slate::timeline-title title="Order placed" />
            <x-slate::timeline-description description="Your order has been confirmed." />
        </x-slate::timeline-content>
    </x-slate::timeline-item>
    <x-slate::timeline-item>
        <x-slate::timeline-indicator>
            <span class="size-2 rounded-full bg-muted-foreground"></span>
        </x-slate::timeline-indicator>
        <x-slate::timeline-content>
            <x-slate::timeline-title title="Shipped" />
            <x-slate::timeline-description description="Package is on the way." />
        </x-slate::timeline-content>
    </x-slate::timeline-item>
</x-slate::timeline>

Composition
code 
Timeline
└── TimelineItem
    ├── TimelineIndicator
    └── TimelineContent
        ├── TimelineTitle
        └── TimelineDescription
Last updated .