shadcn.io is not affiliated with official shadcn/ui
Centered Spine Timeline Block for Ark UI
A product team's decision journal on a thick centred spine: six decisions as diamonds on the start side, outcomes as circles at their review dates on the end side, days to each outcome and their median derived, and a pin for a pair.
Installation
Overview
Look back at what you decided and how it turned out with this centered spine timeline for React with Ark UI. It is written for Hindmark, a fictional product decision journal. A hairline frame with a plus mark on each corner holds a thick spine down the middle from the large breakpoint. Six decisions sit on the start side, each with a diamond, its reason and the date, and each outcome sits on the end side with a circle, joined by a short rule: held, mixed or reversed, with a note and the days it took to find out. Two reviews are still due, so their outcomes are drawn dashed and say "Review due 3 Nov, in 20 days", counted from one fixed date. The header gives the median number of days to an outcome, worked out from the dates. A decision is a button: pressing it pins its pair, tints both cards and says so in the status line. On a phone the spine moves to the start and each decision has its outcome under it. It is built from Guides and native buttons, with a CSS entrance and your theme's tokens for every colour. For product teams, engineering decision records and retrospectives. The decisions are example data.
FAQ
How do I add a decision?
Add an object to DECISIONS, oldest first. It has an id, a title, a why, an ISO decided date and either an outcome (a result of Held, Mixed or Reversed, a note and a reviewed date) or, while it is open, a reviewDue date. The days to an outcome, the median and the days until a review are all derived from those dates.
How is the median worked out?
From the days between each decision and its outcome, for the decisions that have one. With an even count it is the mean of the two middle values. Open reviews are left out until they have an outcome.
What does pinning do?
A decision is a toggle button. Pressing it tints the decision and its outcome and puts a sentence in the status line, such as "Drop the free plan: held after 35 days." The outcome is linked to the button as its description. Press again to unpin.
Is it accessible?
The journal is an ordered list in date order. Diamonds and circles are decoration; the result is a word, and a pending outcome says it is pending in words as well as with a dashed border. Each decision button reports whether it is pinned.