Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Timeline blocks

Pro

Icon Markers Timeline Block for Vue

A personal build journal where each event wears an icon marker, with a composer in the end cell that picks one of six markers, a title and a bounded date, then inserts the new event in date order with an Undo.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let people record an event and choose how it is marked with this icon markers timeline for Vue with Ark UI. It is written for Markpad, a fictional project notebook. A hairline frame with a plus mark on each corner holds a rail of six events in a scrolling region and a composer in the end cell. Each event has a round tile with an icon: a lightbulb for an Idea, a fork for a Decision, people for a Meeting, a flag for a Milestone, a triangle for a Problem and a note for a Note, and the kind is also written under the title. The composer has six marker tiles as native radios, a title field, a date field bounded from 1 Sep to the page's fixed "now", and the one primary, a Shine Button "Add to timeline". The new event slides into date order with a fade, the rail scrolls to it, and the status line says "Added 'Prototype review' on 9 Oct. Kept in this tab only." with an Undo. For journals, project logs and any list where the kind of an entry matters. The journal is example data.

FAQ

How do I change the markers?

Edit MARKERS at the top of the file: each has an id, a word and a lucide icon. The rail draws every event with the marker named by its kind, so adding a kind is one line. The starting events are FIRST, oldest first.

Where does a new event go?

Into date order: after every event that is on the same day or earlier, and before the later ones. The rail then scrolls to it so it is not lost above or below the fold. Undo removes the one event you just added.

What does it refuse?

An empty title, and a date outside 1 Sep to the fixed "now" (14 Oct). The problem appears in a reserved line above the button, so the form does not jump. The date field also carries the bounds, so the browser's picker stays inside them.

What stays in the page?

The events you add and the last added id for Undo. Nothing is saved or sent. To wire it for real, post the new event to your API in add, use the id it returns instead of the local one, and keep the insert-in-order logic as it is.

Is it accessible?

The markers are native radios in a fieldset with a legend, so the arrow keys move between them. The icon is decoration: the kind is written in the row. The problem line is an alert that is there from load, and the status line is a polite live region.

How does it look on a phone?

The composer stacks under the rail, which keeps a shorter scrolling region, and the marker tiles stay three across. The Add button is full height for thumbs.

All 100 timeline blocks