shadcn.io is not affiliated with official shadcn/ui
Live Preview Changelog Entry Form Block for React Aria
A changelog entry form with a greyscale preview card beside it that updates as you type, clips the title and summary at two lines like the list, and turns Published when you publish.
Installation
Overview
Check how an entry will look while you write it with this form with live preview for React with React Aria. A compact header sits over a hairline frame with a plus mark on each corner. The form is at the start: a title with a count ("41 of 60"), a summary in a Textarea with its own count, a label chosen from four Badge looks (New, Improved, Fixed, Removed, told apart by weight and edge, never by colour), a status Select and an author. At the end is a side cell with a drawn greyscale card of the entry as the changelog list shows it: the label and status badges, the title, the summary, the author's initials and a date. The title and the summary stop at two lines like the list does, and a line under the card says whether the summary is clipped, measured from the card itself. Publish entry checks the form and turns the card's status to Published; Save draft keeps it as a draft. It's built from Input, Textarea, Select, Badge, Avatar, Field, Button, Shine Button and Guides. For changelogs, announcements, product cards and any editor with a result you can see.
FAQ
How does it know the summary is clipped?
The card's summary has line-clamp-2, and an effect compares its scroll height with its client height after each change and on resize. If the text is taller than the box, it says "clipped". The measurement is of the real card at its real width, so a narrower card or a different font gives a different answer, which is the point. Use the same classes in your list so the preview stays true.
Why are the label choices not colours?
The page follows the theme and uses no palette colours, so the four labels differ in weight and edge: a solid badge, a tinted one, an outline and a dashed one. If your changelog uses colours, change LOOKS; keep the word in the badge, so the label never depends on colour alone.
How does it work with a keyboard and a screen reader?
Every field has a label, the counts are tied to their fields and the label choice is a group of radio buttons moved with the arrow keys. The card is an article named "Entry preview" and its status carries a hidden "Status:" before the word. The foot, the one live region, announces what Publish and Save draft did; a failed press focuses the first field with a problem.
How does it look on a phone?
The preview stacks under the form with its own rule and the heading "Preview". Title and summary hold two lines of space, so the card never changes height as you type, and the foot is pinned to the bottom of the screen.
What stays local, and how do I connect it for real?
Nothing is saved: the foot says "Published in this demo. Nothing sent." and the date is a typed constant. In your app, publish the entry from the Publish handler, store the status with it, and render the card in your list from the same component as the preview.