Skip to content
shadcn.io

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

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.

How does the length picker work?

It is a Select named "Sprint length". It takes items and onValueChange with the new value.

How does it fit on a phone?

The prompt and the length picker come first, then the pad under them, and the earlier prompts close the block, each part under a hairline. The timer, Reset clock and the Shine Button wrap onto two lines when they do not fit side by side.

  • Pro

    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.

  • Pro

    Reading Time Blog

    Reading tools

    Posts 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 drafts

    A 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

    A 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 feedback

    A 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 series

    A 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.