shadcn.io is not affiliated with official shadcn/ui
Full Width Writing Form Block for Ark UI
A writing form for a publishing platform: a large title that grows with its text, a category, a counted excerpt, up to five tags and a tall body at a 44 rem reading width, with Publish in the header.
Installation
Overview
Give a long piece of writing room, with this full width form for React with Ark UI. A compact header holds the one colored control, a Shine Button named Publish, over a wide hairline frame with a plus mark on each corner. A top band reads "Draft, 58 words" and holds Save draft. Below it a large borderless title grows with its text, and a quiet band holds a Select for the category, an excerpt in a Textarea that counts to 160 and a Tags Input for up to five tags; the body is a tall textarea. Every field stacks at a reading width of 44 rem with generous space between them. The word count follows the body. Publish with a problem names the first one and focuses it; a good post is kept in the tab and nothing is sent. It's built from Textarea, Select, Tags Input, Label, Button, Shine Button and Guides, with a CSS entrance only. For articles, announcements, release notes and any form where the writing is the point.
FAQ
How does the title work?
It is a textarea that sizes itself to its text (field-sizing: content), so a long title wraps instead of scrolling, with no border so it reads as a heading. Enter does not break it, because a title is one line. It has an accessible name, "Title", and a visible focus ring.
Why is the form capped at 44 rem?
About 70 characters is a comfortable line to write and to read back. The panel is wide so the header has room; the bands cap their content with max-w-[44rem], so change that one value if you want a wider page.
How do the tags behave?
Press Enter or a comma to add one, Backspace to remove the last. Tags are lower-cased, repeats are refused and five is the most; a refused tag explains why in the line under the field.
Why is Publish in the header?
It is the create action of the page, as in a list's header. It is linked to the form with the form attribute, so pressing it runs the same checks as Enter would, and the result appears in the status line in the foot.