shadcn.io is not affiliated with official shadcn/ui
Notes Composer Shortform Blog Block for Radix UI
A microblog feed with a composer: a Textarea with a 280-character ring and a Post note button that puts your note at the top, and five notes with a like toggle whose count rolls.
Installation
Overview
A short-form notes block for React with Radix UI, written for Inkwick, a poet's microblog. A start-aligned header sits over a split behind a divider. At the start, a composer: a Textarea, a ring that fills as you type and turns into a count in the last twenty characters (280 at most), and a "Post note" Shine Button that is off while the note is empty or over the limit. At the end, the feed: five notes, each with its author as initials, a fixed date and a like Toggle whose count rolls to the new number. Posting puts your note at the top, marked "You", and keeps the newest seven. It's built from Textarea, CircularProgress, Shine Button, Toggle, SlidingNumber and Guides. Nothing is sent: notes and likes live in this page only and are gone on reload.
FAQ
Where does my note go?
Nowhere. It's added to the block's own state, shown first in the feed under the name "You" with the words "Just now", and lost on reload. A status line says so. To make it real, send the text to your server in the submit handler and prepend what comes back.
How does the 280-character limit work?
The ring fills with the length. In the last 20 characters a warning icon and the number of characters remaining appear (in a space reserved for them, so nothing shifts), and past the limit the number goes negative and Post note switches off. Screen readers hear it only at 20, 10, 0 and over, never on every keystroke.
How do the likes work?
Each like is a Toggle: pressed adds one to the note's base count and the number rolls to it; pressing again takes it back. The button's name says whose note it is, the first words and the count, and the rolling digits are hidden from assistive technology.
The toggle takes pressed and onPressedChange.
Where does focus go after posting?
Back to the text field, so you can write another note. The Shine Button is disabled while the field is empty, so it would otherwise lose the focus.