shadcn.io is not affiliated with official shadcn/ui
Long-Form Review Block for Svelte
A customer's six-month review of a keyboard as four chapters beside a sticky chapter index, with inline Pro and Con markers, a reading time worked out from the words and a verdict band.
Installation
Overview
A long review read like an article, for Svelte with Ark UI, about the Lintelstead 75, a fictional mechanical keyboard. A split divider runs the height of the block. In the end column, four chapters (the first week, three months in, what has worn, would I buy it again) sit between hairline bands as prose, with a Pro or Con marker, an icon and the word, in front of each sentence that praises or complains, and a verdict band at the foot: the score in read-only stars and a three-row breakdown. In the start column the title, the reviewer, a reading time worked out from the words and a sticky chapter index stay in view, with a bar that follows the chapter on screen. On a phone the index becomes a "Jump to" Select under the title. It's built from Toc, Select, Rating, Avatar, Prose and Guides.
FAQ
How do I change the review?
Edit CHAPTERS at the top of the file. A chapter has an anchor, a title and paragraphs; a paragraph is a list of pieces, each plain, a pro or a con, and the Pro or Con marker is added in front of the sentence. The index, the Jump to list and the reading time all come from the same array, and PARTS holds the verdict's three rows.
Where does the reading time come from?
It counts the words of every piece and divides by 200 words a minute (PACE), rounded, with a minimum of one minute. Edit the text and the line changes with it.
How does the chapter index work?
Each entry is an anchor to its chapter's heading, and the bar beside the list follows whichever chapter is on screen. The headings keep a scroll margin so they land below the page's own top. It is hidden below the large breakpoint, where the Select takes over.
What does the Jump to Select do on a phone?
Choosing a chapter sets the page's hash to that chapter's heading, so the browser scrolls there, and the Select keeps showing the last chapter you jumped to. It is a real Select, so it opens with Enter or Space and closes with Escape.