shadcn.io is not affiliated with official shadcn/ui
Create Post Composer CRUD Block for Vue
A writing platform's post composer with a slug that follows the title until edited and is checked against taken and reserved ones, a word count, up to five tags, an optional publish date, and a Created here list with Edit and Delete.
Installation
Overview
Write and file a post in one place, with this post composer for Vue with Ark UI. It is a hairline frame with a plus mark on each corner that holds a composer and the list of what it has made. The Title and Slug are Inputs: the slug follows the title as you type until you edit it, then a "Reset to title" link brings the follow back, and it is checked live against five slugs already in use and a few reserved words, with the reason under the field. The body is a Textarea with its word count and "2 min read" worked out from it, the tags are a Tags Input that stops at five, and a Schedule Switch reveals a date that cannot be before the as-of day ("Publishes 20 Oct" is worked out from it). A one-line preview shows how the row will read. Save draft is an outline Button; Publish, the only Shine Button, needs a title and a body and becomes "Schedule post" or "Update post" when that is what it does. The post lands at the head of "Created here" marked New, in a frame of fixed height with an Empty state; its Edit loads the composer, its Delete leaves "Removed ..." in the foot beside an Undo. For editors, CMS panels and any record with a derived address.
FAQ
How does the slug follow the title, and what is refused?
Until you type in the slug field it is the title in lower case with every run of other characters turned into one dash. Once you edit it, the title stops moving it and "Reset to title" appears; pressing it puts the follow back. A slug must be lower case letters, numbers and single dashes, must not be one of five already in use or a reserved word (admin, api, login, new, settings), and the line under the field says why when it is refused or that the address is free. A refused press names the first problem and focuses that field.
What does each button need?
Save draft needs a title and a valid slug, so a post can be filed half written. Publish also needs a body. Switching Schedule on adds a date that must be today or later; if it is after the as-of day, 14 October 2026, the post is filed as Scheduled for that day, otherwise as Published. Either way the composer empties and focus goes to the new row.
How does editing a post work?
Edit loads the post into the composer, with its slug kept as it was, and the main button reads "Update post". Updating replaces the row in place, keeping its place in the list, and empties the composer. "New post" at the top of the composer leaves editing without saving. Deleting the post you are editing also empties the composer.
What does Undo restore?
The list of created posts as it was before the last save, update or delete. It undoes one change only; any new change replaces it, and nothing times out. The composer is not restored: it holds what you were writing next.
What stays local, and how do I wire a real publish?
Nothing is published or sent. The five taken slugs are typed in TAKEN and the created posts live in this tab; a reload clears them. In your app check the slug against your server as it is typed (debounced), post the form in commit, and show a server refusal on the field it names. The read time assumes 200 words a minute.
Is it accessible from the keyboard?
Yes. Every field has a label and a problem slot that is always rendered, so nothing moves when a problem appears; tags are added with Enter, a comma or a semicolon and removed with Backspace or Delete, and the date field is the browser's own, so it works the same in every language. The list frame scrolls and is reachable by keyboard. The foot is the one polite status; it says what was saved, refused or removed.