Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Blog blocks

Pro

Drafts Desk Blog Block for Solid

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.

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.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A drafts desk for Solid with Ark UI, written for Fairleaf, a blog about tools for writers. A start-aligned header sits over a count band and five drafts as rows that run from rail to rail. Each row has the title, a status Badge (Outline, Drafting or Needs edit), the author, a Progress bar with "1,240 of 1,800 words", the fixed time it was last edited, and a menu with Edit, Duplicate and Archive. Duplicate puts a copy at the top, Archive takes the row away and turns on Undo archive, and Edit only says what it would do. It's built from Badge, Progress, DropdownMenu, Button and Guides. Nothing is saved in this demo: the changes live in this page and a reload brings the five drafts back. Word counts and edit times are example data.

FAQ

What do the menu items really do?

They change the block's own state and say so. Duplicate adds a copy titled "(copy)" at the top, with the Outline status and no words. Archive removes the row and enables Undo archive, which puts it back where it was. Edit changes nothing and says it would open the draft in the editor. A polite status line under the count reads each result, and nothing is saved in this demo.

Where does the count come from?

It is worked out from the rows: "5 drafts, 2 need an edit" counts the drafts shown and the ones with the Needs edit status, so it changes when you duplicate or archive. The progress bars and the percentage come from each draft's words and target.

How is the status shown without colour?

Each status has a word and an icon (a list, a pencil, a flag) and the three differ in weight, not hue: Drafting is a filled neutral badge and the other two are outlined. The bars use the foreground colour on a neutral track.

How do the menu and the keyboard work?

Each row's three-dot button is named for its draft ("Actions for ..."), opens with Enter or Space, moves with the arrow keys and closes with Escape. Each item takes onSelect and a value.

Why are the times fixed?

The edited time is a time element with a fixed ISO value, formatted in UTC, so it reads the same on the server and in every browser. A copy has no time and says "Copied just now".

How does it fit on a phone?

The rows stack: the title and status first, the progress bar and word count under them, then the edit time. The menu button stays at the top end of the row, and the count band reserves two lines for the status so nothing shifts.

All 100 blog blocks