shadcn.io is not affiliated with official shadcn/ui
Incident Timeline Carousel Block for React
Four incidents on a track that opens on the open one: severity P1 to P4 drawn as bars, affected services, a status and a scrolling list of dated updates, with a field that posts an update and a way back to the open incident.
Installation
Overview
Keep the incident that matters one press away with this incident timeline carousel for React with Base UI. Pagerlight, an incident log, keeps its last four incidents on a track, one per slide: a severity from P1 to P4 drawn as four bars, the services it touched, a status word and a list of dated updates, newest first, that scrolls inside a fixed height. The track opens on the open incident. Browse to a resolved one and "Back to the open incident" appears. A field in the foot posts an update to the open incident with the block's one primary, "Post update": it lands at the top of that list and the track brings it into view. A band above the track counts "1 open, 3 resolved" and holds Previous and Next. It is built from Carousel, Input, Label, Badge, Button and Guides, with CSS transitions only. The product, the incidents and the times are made up for the example.
FAQ
What does posting do?
It adds your text to the top of the open incident's list with a time one minute after the last post, clears the field and moves the track to the open incident. The status line says "Posted in this demo, nobody was paged." Posting is refused, with a line saying so, when the field is empty.
How is severity shown?
As a word (P1 to P4) and four bars of rising height, filled to the severity. The bars are decoration; the word carries the meaning.
How do I read a long list of updates?
Each slide's list is a keyboard-reachable scroll region named "Updates for" its incident, so arrow keys scroll it once it has focus. The slide keeps one height, so a long list scrolls instead of resizing the track.
How does it work with a keyboard?
Tab reaches Previous, Next, the field, "Post update" and "Back to the open incident" when it shows, then the visible list. Slides that are not in view are hidden from the tab order and screen readers. Enter in the field posts.