shadcn.io is not affiliated with official shadcn/ui
Help Articles CRUD Block for Ark UI
A help article manager that points at what needs work: helpful percentages from votes, a Needs work toggle with its count, and one editor that creates, edits, publishes and deletes.
Installation
Overview
Show which help articles are failing readers and let an editor fix them in place, with this manager for React with Ark UI. Articles sit by category in one held frame; each row shows its status and how helpful readers found it ("Helpful 82% of 41"), worked out from typed votes. A "Needs work" Toggle narrows the list to the articles under 60% and carries the count in its label. Edit, or New article, swaps the frame for one editor with a Back to articles button: a title Input, a category Select, a body Textarea whose reading time ("3 min read") is worked out as you type, and Publish or Unpublish. The same form creates and edits, Save is the one Shine Button, and Delete leaves an Undo in the foot. For help centres, documentation teams and any content list judged by its readers.
FAQ
How do I load my articles and votes?
Edit ARTICLES: each has an id, a title, a body, a category, a published flag and the vote counts yes and no. The percentage, the vote total, the Needs work count and the reading time are all derived; nothing is typed twice. A new article starts with no votes.
What does Needs work mean?
An article with votes whose helpful share is under 60%. The toggle's label shows how many there are, and turning it on filters the list; if nothing qualifies you reach the empty state without the frame changing height. Change the threshold in LOW.
How does the editor behave?
List and editor swap inside the same frame, so the block never changes height, on every screen width. Back to articles returns focus to the row you left. With unsaved changes the first Back press warns and the second drops them. Publish and Unpublish change the status shown in the form and take effect when you Save.
What is checked when I save?
A title and a body, both. A failed save names the first problem under its field in a slot that is always there and focuses it. The body is limited to 600 characters.
What stays local, and how do I wire it for real?
Articles live in state in this tab and a reload brings the eight shown back; nothing is published and no votes are collected. In your app load votes from your analytics, save in save and call your delete endpoint in remove, keeping Undo as a restore request.