Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Timed Sprint Writing Prompt Blog Block for React Aria

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 React Aria, 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 onChange with the new key.

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.