shadcn.io is not affiliated with official shadcn/ui
Knowledge Base Tree Blog Block for Vue
A help centre's articles as a working tree of topics beside a preview of the picked article: its topic, title, two-sentence summary, last update and an Open article link.
Installation
Overview
A knowledge-base browser for Vue with Ark UI, written for Reedmoor Help, the help centre of a shift-scheduling tool for care homes. A start-aligned header sits over a split behind a divider. At the start is the catalog's TreeView with four topics and twelve articles: arrow keys walk it, the side arrows open and close a topic, and picking an article gives it a bar and a tint. At the end the picked article's preview shows its topic as a badge, the title, a two-sentence summary, when it was last updated, the reading time and an Open article link. Opening a topic only opens it, so the picked article keeps its bar. Every preview is stacked in one grid cell, so choosing an article never moves the page, and a polite line says which one is showing. On a phone the preview sits under a short tree that scrolls. It's built from TreeView, Badge, Button and Guides. For help centres, documentation indexes and any blog that files its posts under topics. The articles are fictional and nothing is saved.
FAQ
How do I add topics and articles?
Edit TOPICS: each topic has a name, an id and its articles, and each article an id, a title, a two-sentence summary, a reading time and an ISO updated date. The tree and the previews are built from the same data, so there's one place to edit. The updated date is fixed text, formatted in UTC so the server and the browser print the same day.
How does the keyboard work?
The tree is one tab stop. Up and Down move between rows, Right opens a topic and Left closes it, Home and End jump to the first and last row, and Enter or Space picks an article. Picking updates the preview and a polite status line that says which article is showing. The Open article link is a plain link after the tree.
Why do all the previews exist at once?
They sit in one grid cell, and only the picked one is visible; the others are invisible, inert and hidden from assistive technology. The cell takes the height of the tallest, so the page never jumps when you pick another article, and the unseen ones can't be tabbed to or read.
How does it fit on a phone?
The tree sits in a short scrolling window (seven rows when the first topic is open) with the preview directly under it, so the preview is on the first screen. From lg the tree sits at the start in a taller window and the preview at the end.