shadcn.io is not affiliated with official shadcn/ui
Knowledge Base CRUD Block for Radix UI
A handbook window with sections and counts, a quick New section line, articles under the chosen section, an editor with Move to section, and a section Delete that refuses while it holds articles.
Installation
Overview
Organise a company handbook where it is written, with this knowledge base window for React with Radix UI. It is a framed window of fixed height with a top bar holding the title and the one Shine Button, New article. At the start sit the sections as a nav with counts, a quick line to add a section and, under the chosen section, its articles; the section's name is an inline Editable. At the end is the article editor: a title Input, a "Move to section" Native Select, a body Textarea, Save and Delete. A section that still holds articles cannot be deleted: its Delete is aria-disabled and says "Move or delete its 3 articles first"; an empty section deletes with an Undo in the foot. Below the medium breakpoint the window shows one pane at a time with a Back to articles button. For handbooks, wikis and any tree two levels deep with a rule about emptiness.
FAQ
How do I load my sections and articles?
Edit SECTIONS (an id and a name) and ARTICLES (an id, a title, a body and the section id it belongs to). The counts, the "Move or delete" sentence and the Move to section options are all derived from them. New sections and articles get ids from counters in state.
Why can't I delete a section that has articles?
Deleting it would orphan its articles. Its Delete button stays focusable, is aria-disabled, and the reason is visible as text beside it and spoken in the status line when you press it. Move each article with Move to section, or delete them, and the button works; the section then goes with an Undo in the foot.
How does the editor save, move and delete?
Save stays quiet until something changes ("No changes to save"). Choosing another section in Move to section and saving moves the article there and follows it. Delete article removes it at once and leaves an Undo. Choosing another article or section with unsaved changes is refused with a message instead of discarding them.
How is a section renamed?
Click its name, or the pencil, to edit it in place; Enter saves and Escape cancels. An empty name or one used by another section is refused with a message and the old name stays.