shadcn.io is not affiliated with official shadcn/ui
Split View Timeline Block for Ark UI
A cold-brew lab notebook with eight trials on a nav rail whose node spacing is the days between entries, the chosen entry's conditions, results and note beside it, and Previous and Next buttons.
Installation
Overview
See how long you waited between entries and read each one in full with this split view timeline for React with Ark UI. It is written for Benchnote, a fictional bench notebook for small labs. A hairline frame with a plus mark on each corner holds a nav rail at the start and the chosen entry beside it. The rail gives each of the eight cold-brew trials a node placed by its date, nine pixels to the day, so a quiet fortnight is a long dashed stretch and a busy week is tight. Each node is a button with a roving tab stop: the arrow keys move between entries, Home and End jump to the first and last, and the detail follows. The detail has the conditions and the results as two definition lists, a short note, and a line such as "14 days after the previous entry", with Previous and Next buttons and the entry count. A polite status line announces each change. For lab notebooks, field logs, research diaries and any record where the gaps matter. The notebook is example data.
FAQ
How do I change the entries?
Edit TRIALS at the top of the file. Each trial has an id, an ISO day on, a title, a note, and two lists of facts: conditions and results, each with a label and a value. Spacing and the "days after the previous entry" line are derived from the dates. Keep three facts in each list so every entry fills the detail the same way.
What does the spacing mean?
The distance between two nodes is the number of days between the entries, at PX_PER_DAY pixels each. A gap of ten days or more (QUIET) is drawn dashed. Change either constant to stretch or squeeze the rail; the rail's height follows from the first and last date.
How do I use it with a keyboard?
Tab goes to the chosen node, which is the only one in the tab order. Up and Down move to the previous or next entry and carry focus with them, Home and End go to the ends, and the detail follows at once. On a phone, where the rail is a row of chips, Left and Right do the same and follow the page direction.
What stays in the page?
Which entry is chosen. Nothing is saved. To wire it for real, load the trials from your notebook store, keep the chosen id in the URL if you want links to an entry, and leave the rest.
Is it accessible?
The rail is a navigation landmark with a button per entry, each named with its title and date, and the chosen one is marked as current. The detail is an article labelled by its heading, and a polite status line says which entry opened. The spacing is extra information: the dates are in the text as well.