Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Blog Posts CRUD Block for Solid

A posts list with tabs and counts, a quick line that adds a draft with a unique address, a status menu per row, an inline title edit and a delete that only asks for a published post.

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

Manage a blog's posts without leaving the list, with this posts block for Solid with Ark UI. A quick line starts a draft: type a title and press Enter, and its address is worked out and kept unique, so "Why we moved" becomes penfold.example/notes/why-we-moved-2 when the first is taken. Tabs show All, Draft and Published with counts over a held list. Each row has an initials Avatar, an inline Editable title, the address and tags, a status Dropdown Menu (Publish, Unpublish, Archive, Restore as draft) that changes at once, and a delete button. Only a published post asks first: an Alert Dialog says it is live and what readers will find. A draft or an archived post goes straight to "Deleted ... Undo" in the foot. For editorial tools, studio blogs and any list where the status decides how careful a delete should be.

FAQ

How do I fill it with my posts?

Edit POSTS: each has an id, a title, a slug, an author (initials), a status of draft, published or archived, and tags. The counts on the tabs come from the list. New ids come from a counter in state.

How is the address made, and what if it clashes?

The title is lower-cased, anything that is not a letter or a digit becomes a dash and the first five words are kept. If another post already has that address, -2, -3 and so on are added until it is free. Renaming a post does not change its address, and the foot says so.

Why does only a published post ask before it is deleted?

Deleting a live post breaks a public address, so the dialog says where it was and what happens; the focus starts on Cancel and the confirm button is destructive. A draft or an archived post is not public, so it is removed at once and Undo in the foot puts it back.

What do the status menu entries do?

Publish, Unpublish, Archive and Restore as draft change the status in one press and say so in the status line; the entries shown depend on the current status. If the post no longer belongs in the open tab, focus moves to the next row.

What stays local, and how do I wire it for real?

Posts live in state in this tab and a reload brings the eight shown back; nothing is saved or published. In your app send the status change when the menu item is chosen, check the address on the server, and call your delete endpoint in drop.

How does the status menu work with the keyboard?

The trigger is a button named with the post and its status. Enter or Space opens the menu, the arrow keys move between entries and Enter chooses one. After a change focus stays on the row's status button, or moves to the next row when the post no longer belongs in the open tab. Closing the menu with Escape returns focus to its button.