Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

CRUD blocks

Pro

FAQ Editor CRUD Block for Svelte

An FAQ manager where each accordion row is its own editor: question, answer, Move up and Move down inside the category, a Published switch that needs an answer, and Delete with Undo.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Keep a help centre's questions in order without a separate edit page, with this FAQ editor for Svelte with Ark UI. Questions sit in category bands, each an Accordion row. Closed, a row shows the question and a Published Switch; open, it becomes the editor: a question Input, an answer Textarea with a count, Move up and Move down inside the category, Delete and Done. A quiet "Add a question" row ends each category and opens a new row. Publishing needs an answer: the closed row says "Needs an answer to publish" and the switch refuses with the reason in the status line. One row is open at a time and a question can't be left empty. For help centres, product FAQs and any ordered list that is written where it is read.

FAQ

How do I load my own questions?

Edit FAQS and CATEGORIES: each question has an id, a category from the list, a question, an answer and a published flag. The order of the array is the order shown inside each category, which is also what Move up and Move down change.

Why can't I publish a question without an answer?

A published question with no answer would show an empty page to readers. The switch stays off, the closed row shows the reason as text, and pressing the switch says "Add an answer before publishing". Emptying the answer of a published question turns it back into a draft.

How does reordering work?

Move up and Move down swap the question with its neighbour inside the same category and the foot says the new place ("place 2 of 3 in Billing"). At either end the button is aria-disabled and explains why when pressed. Focus stays on the button you pressed.

How does the keyboard work?

The row's heading is a button: Enter or Space opens it. The arrow keys move between rows. A new row takes focus in its question field; Done returns focus to the row's heading.

What stays local, and how do I wire it for real?

Questions live in state in this tab and a reload brings the eight shown back; nothing is published. In your app save on blur or on Done, send the new order after a move, and keep Undo as a restore request.

What does Delete do?

It removes the question at once and leaves "Deleted ..." and an Undo in the foot of the block. Undo restores the list as it was, including the position, and focuses the restored row.

All 100 crud blocks