shadcn.io is not affiliated with official shadcn/ui
Chaptered Origin Story About Block for Vue
A company's origin story as four long chapters of prose beside a sticky chapter index that follows the reader, turning into a row of chips on phones.
Installation
Overview
An origin story for Vue with Ark UI, written for Firstlight Press, a fictional publishing platform for independent authors. The story is four chapters of real prose, "Chapter 1: The spare room" to "Chapter 4: What we kept", set in the end column behind a split divider and separated by hairline bands. In the start column the title and a chapter index stay in view while you read: the index is the Toc component, so a bar follows the chapter that's on screen and each entry is an anchor that jumps to its heading. On a phone the index becomes a row of chips under the title that scrolls sideways, and the chapters stack. Times in the story are relative ("that first winter", "two summers later"), never a calendar year. The block ends on a text link, not a rule, and is built from Toc, Prose and Guides with your theme's tokens for every colour. For about pages that tell a founding story at length. The company and its story are example content.
FAQ
How do I write my own chapters?
The chapters are CHAPTERS at the top of the file: each has an anchor (the id the index links to, so keep it unique on the page), a title and an array of paragraphs. The chapter numbers come from the order. The index is built from the same list, so adding or removing a chapter updates both.
How does the chapter index work?
It is the Toc component: its items are the chapters' headings, a bar slides to the one in view as you scroll, and each entry is a normal anchor, so it works with a keyboard and without script. On wide screens the index is sticky and stays beside the chapters. On phones it is replaced by a row of plain anchor chips, which jump to the same headings.
How is it read by a screen reader?
The title is the only h2 and each chapter is a section labelled by its h3, which carries its number as text ("Chapter 1: The spare room"). The index is a navigation landmark with a list of links; the phone chips are a second navigation landmark with its own name, shown only on small screens. The bands and the divider are decorative.
What happens on a phone?
The title and a one-line summary come first, then the chips, then the chapters one under another with a rule between them. The chips scroll sideways inside their own row, and the page does not. Nothing overflows at 320 pixels, and in a right-to-left layout the divider, the bar and the link's arrow all follow the direction.