shadcn.io is not affiliated with official shadcn/ui
Education History Timeline Block for Ark UI
A transcript of six terms on a vertical rail, each opening to its four courses, with term and cumulative GPA derived from letter grades and credits and a Term or Cumulative choice that sets the bar on every node.
Installation
Overview
Read a degree as a path of terms with this education history timeline for React with Ark UI. It is written for Transcriptly, a fictional transcripts service. A hairline frame with a plus mark on each corner holds a rail of six numbered terms, from Fall 2023 to Spring 2026, and a side cell at the end of the panel. Each term shows its credits and its term GPA, and opens with a Collapsible to its four courses with codes, credits and letter grades. The term GPA and the cumulative GPA after each term are derived from those grades on a 4.0 scale weighted by credits, in whole hundredths so the sums are exact. A Term or Cumulative choice in the side cell sets which of the two every node draws as a bar and a figure, and the bars slide to their new length. The side cell also names the best term and counts the terms on the dean's list. The header says "Cumulative 3.60 after 6 terms and 82 credits". On a phone the side cell stacks under the rail. For transcripts, advising pages and degree audits. The school, courses and grades are example data.
FAQ
How do I change the terms and grades?
Edit TERMS at the top of the file. Each term has a name and a list of courses with a code, a name, credits and a grade from POINTS (A, A-, B+, B, B-). Add a grade by adding it to POINTS in tenths of a point. Every GPA, bar, count and header figure is derived from that list.
How is the GPA worked out?
Grade points are held in tenths (A is 40) and multiplied by credits, so every sum is an integer. A GPA is the points divided by the credits, rounded to hundredths and written without a locale. The cumulative GPA after a term uses every course up to and including that term, not an average of term averages.
What does the Term or Cumulative choice change?
Only what the bars and the figure at the end of each row show. Both numbers are always in the text under the term name. The choice is a group of native radio buttons, so the arrow keys move it and it is announced as a group.
What stays in the page?
The chosen lens and which terms are open. Nothing is requested or saved. To use a real transcript, map your records to the Term shape and keep the helpers.
Is it accessible?
The terms are an ordered list with a heading each, and each heading is the trigger of its Collapsible, so it is a real button with aria-expanded. Closed courses are hidden from the keyboard and from screen readers. The bars are decoration; the figures are text. The status line is a polite live region that names the lens.