shadcn.io is not affiliated with official shadcn/ui
Knowledge Base Tree Blog Block for React
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 React with Base 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.
Related
- Pro
Categories Blog
Topics and indexesA houseplant magazine's category index: seven cells on shared hairlines, each a link with an icon ring, a scope, the latest post, a post count and a bar for its share, derived from the list of posts.
- Pro
Directory Blog
Topics and indexesA map blog's A to Z index as a framed command palette: twenty-four posts grouped by the letter they start with, a filter field, arrow keys, a count and key hints at the foot.
- Pro
Post Rows With Sidebar Blog
Post listsA reading layout: five post rows with small drawn route maps at the start, and behind a divider a sidebar of topics with counts, a numbered most-read list and the archive by year.
- Pro
Topic Cluster Diagram Blog
Topics and indexesA hub-and-spoke diagram of a topic cluster: the pillar guide at the hub of a drawn wheel, six topic links on the rim, and the cluster's posts as ruled rows beside it; on a phone a nested list with connectors.
- Pro
Nested Accordion Archive Blog
Archives by dateA farm journal's archive as a nested accordion, years that open to months and months that open to posts, with counts worked out from the posts and an Expand all control.
- Pro
Search Grid Blog
Card gridsA developer-tools blog behind a search field: a slash shortcut focuses it, typing keeps the posts whose title or summary holds the words and marks them, and six cells draw tiny tool windows as covers.