shadcn.io is not affiliated with official shadcn/ui
Timeline With Tags Block for Svelte
Eleven research notes on a vertical rail that you tag yourself: a Tag popover per note adds or removes tags, and a legend of toggles with counts dims every note without the chosen tags.
Installation
Overview
Let readers sort a record with their own labels using this timeline with tags for Svelte with Ark UI. It is written for Notetide, a fictional research notebook. A hairline frame with a plus mark on each corner holds eleven notes from interviews, a survey and a phone session on a vertical rail, newest first. Each note has a dot, a title, a date, a line of text and outline Badge tags with a tag icon and a word. A "Tag" button on a note opens a Popover: tick the existing tags it should carry, or type a new one and press Add. At the end, a legend lists every tag with its count as toggles; press one or more and the notes without those tags are dimmed in place ("5 of 11 shown, the rest dimmed"), so nothing moves. On a phone the legend becomes a scrolling row above the rail. A polite status line says what happened ("Tagged Interview 4 with pricing."). It is built from Popover, Toggle, Input, Badge, Button and Guides. For research notes, support threads and any record that needs a second way to be read. The notes are example data.
FAQ
How do I change the notes and the tags?
Edit NOTES at the top of the file, newest first: each note has an id, an ISO date at, a title, a text and a list of tags. BASE_TAGS is the list the legend starts with. Counts and the legend are derived from the notes, so a tag you add to one note appears in the legend at once and leaves it again when no note holds it.
How are new tags made?
Type a word in the popover and press Add or Enter. cleaned() trims it, lower-cases it, collapses spaces and keeps at most 20 characters. An empty word, or one the note already has, is refused with a sentence in the status line instead of an error. The new tag is added to that note only and joins the legend.
Why dim instead of hide?
Hiding notes would shorten the rail and move everything below it. Dimming keeps the reading order and the height, and the status line says how many notes match. With more than one tag pressed, a note stays lit if it has any of them. Press the tags again to clear the dimming.
What stays in the page, and how do I keep the tags?
Everything: the tags and the filter are local state and no request is made, so a reload brings back the sample tags. To keep them, save the note's tags in tick() and add() and read them back when the page loads.
Is it accessible?
The legend is a group of toggle buttons with a pressed state, named by the tag and its count. The popover holds a labelled group of checkboxes and a labelled field, and its trigger names the note it belongs to. A tag is an icon and a word, never a colour, and the status line is a polite live region present from load.