shadcn.io is not affiliated with official shadcn/ui
Filterable Timeline Block for Radix UI
Thirty-one security alerts on a vertical rail, narrowed by a two-thumb slider over twelve weekly bars, with a fixed-height scroll region, an empty state for quiet weeks and a Reset brush button.
Installation
Overview
Narrow a long record to the weeks that matter with this filterable timeline for React with Radix UI. It is written for Brushlog, a fictional security tool. A hairline frame with a plus mark on each corner holds twelve weekly bars of alert counts, and under them a two-thumb Slider, "From week 6 (31 Aug) to week 9 (28 Sep)". Drag either thumb, or move it with the arrow keys, and the bars inside the range turn solid while the rail below keeps only the alerts of those weeks, newest first. Each alert has a dot, its title, a severity badge with an icon and a word (Critical, High, Medium, Low), the day, the time, the week and the source. The rail sits in a scroll region of fixed height, so the page never moves; a range with no alerts (weeks 4 and 5 are quiet) shows the empty state in the same height. The foot says how many of the 31 alerts are shown, and "Reset brush" puts the range back to all twelve weeks. It is built from Slider, Badge, Empty, Button and Guides, with an entrance only. For security histories, audit trails and any record that is easier to read a stretch at a time. The alerts are example data.
FAQ
How do I change the alerts?
Edit LINES at the top of the file. Each line is week|weekday|clock|severity|title|source, with the weekday counted from Monday and the severity one of critical, high, medium or low. The dates, the weekly counts, the bars, the totals and the sentences are all derived from those lines, so nothing is typed twice. WEEK_ONE is the Monday of week 1 and WEEKS is the number of bars; change both if your history is longer.
How does the range work?
The slider holds two numbers, the first and the last week. shownIn() keeps the alerts whose week falls between them, so the two thumbs can sit on the same week to read one week alone. The bars read the same range: those inside it use the foreground colour and the others a faint one, with no hue, so the state does not depend on colour alone: the sentence under the slider says the weeks in words.
Why is the rail in a scroll region?
So that narrowing the range never shortens the panel and pulls the page up. The region has a fixed height and can be reached with the keyboard; when fewer alerts match it simply shows less, and when none match it shows the empty state at the same height. Set the height with the h-80 class on the region.
What stays in the page, and how do I use real alerts?
Everything: the range and the alerts are local state, and no request is made. To use your own, replace LINES with rows from your API mapped to the same fields. For a long history, fetch the weeks the brush covers instead of keeping all of them, and keep the bars as counts per week.
Is it accessible?
The slider thumbs are named "From week" and "To week" with their values, and the whole control has a label for screen readers. The bars are hidden from assistive technology and replaced by a table of weeks and counts. The status line is a polite live region that is there from load and reads the range when a drag ends, rather than on every step. Severity is an icon and a word, never a colour.