shadcn.io is not affiliated with official shadcn/ui
Knowledge Base AI Block for Svelte
A help centre window with a searchable tree of twelve articles, an answer in brief, Summary and Full article tabs, related articles worked out from shared tags and a box to ask the article a question.
Installation
Overview
Give a help centre an assistant that reads the article for you, with this knowledge base for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Shelfwren Help: a Tree View of four categories and twelve typed articles at the start, with a search field that filters it ("4 of 12 articles") and marks the matching letters with Search Highlight Text, and the chosen article at the end. The page opens with an "Answer in brief" of two sentences, then Tabs for the Summary and the Full article, the related articles worked out from the tags they share, a "Was this helpful?" pair and an "Ask this article" box. The first two articles have three sample questions with typed answers; the rest say they have none. The Shine Button sends the question and is the only colored control, and Guides draw the frame. For help centres, documentation sites and any place where the article should answer back.
FAQ
What stays in the page, and how do I make it real?
Everything. The articles, their briefs, summaries and sample answers are typed in the file, the search filters them in the tab and the helpful vote is kept in memory. Nothing is searched on a server, read by a model or sent. To wire it for real, replace the typed answers with a call that sends the question and the article text to your model, and send the vote to your analytics where rate sets it.
How do I add my own articles?
Edit CATEGORIES and ARTICLES: each article has a category, a title, tags, a two-sentence brief, three takeaways, the body as paragraphs and, optionally, sample questions with the words that pick them. The tree, the counts and the related list are all built from that data.
How does the search work?
It matches the typed words against titles and tags as you type, keeps only the categories that hold a match, opens them all and marks the matching letters in each title. The line above the tree says "4 of 12 articles"; with no match an empty state offers Clear search, and the tree keeps its place in the same scroll region.
How are related articles chosen?
By shared tags: every other article that shares at least one tag is ranked by how many it shares, ties go in the order of the list, and the top three show with the tags they share ("2 shared tags: people, sharing"). Pressing one opens it.