shadcn.io is not affiliated with official shadcn/ui
Timed Sprint Writing Prompt Blog Block for React
A weekly writing prompt with a sprint pad: a length Select, a countdown Timer with start and pause, a Textarea with a live word count against a target, and earlier prompts as an ordered list.
Installation
Overview
A writing-prompt block for React with Base UI, written for Scrivenby, a writers' club. A start-aligned header sits over a split behind a divider. At the start, the week's prompt with its topic, a Select for the sprint length (5, 10 or 15 minutes, each with a word target) and the earlier prompts as an ordered list with the club's average. At the end, a framed pad: a countdown Timer with a Shine Button that starts, pauses and resumes it, a Reset clock button, a Textarea, and a Progress bar with the live word count against the target. A polite status speaks only at the start, the pause, the resume and the end. It's built from Timer, Select, Textarea, Progress, Badge, Shine Button, Button and Guides. Nothing is generated, and nothing is saved in this demo: the prompts are typed and your words stay in this page.
FAQ
Is the prompt generated?
No. The prompt and the earlier ones are typed in PROMPT and EARLIER at the top of the file, as an editor would write them. Nothing calls a model, and the block never pretends to.
How does the clock work?
Start sprint runs the countdown, the same button then reads Pause, and after a pause it reads Resume. Reset clock puts the full length back and keeps your words. Choosing another length also starts the clock over and says so. When the clock reaches zero the status says how many words you wrote and the button becomes New sprint; you can keep typing.
What does a screen reader hear?
The timer carries a sentence ("9 minutes 58 seconds remaining") instead of its digits, and a polite status speaks only when something happens: start, pause, resume, a new length, a reset and the end. It never reads every second.
How are the words counted?
A word is a run of characters between spaces or line breaks. The bar and the line under it ("9 of 300 words") update as you type, against a target of thirty words a minute for the chosen length. The target is a gentle pace, not a limit.
Related
- Pro
Notes Composer Shortform Blog
Story formatsA 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.
- Pro
Reading Time Blog
Reading toolsPosts by length with a reading-speed Slider: every post shows its words, a length bar against the longest post and the minutes it takes at your speed, with a total that recalculates as you move the slider.
- Pro
Drafts Desk Blog
Stats and draftsA drafts list for a writing-tools blog: each row has a status badge, a progress bar with its word count, the fixed time it was edited and a menu to edit, duplicate or archive it.
- Pro
Numbered Rail Thread Blog
Story formatsA numbered thread: six parts hung on a vertical rail with their "1/6" chips, the author once at the top, the first four in view and a Show 2 more button that opens the last two.
- Pro
Comment Thread Blog
Reader feedbackA blog comment thread on hairline rows: top-level comments with initials avatars and fixed dates, replies in a Collapsible, and a form with an empty-submit check that adds your comment to the thread.
- Pro
Accordion Step By Step Blog
Tutorials and seriesA tutorial in five steps: a single-open accordion on a vertical rail, a Done button that ticks a step and opens the next, and a framed drawing of the open step.