Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Blog Admin Sidebar Block for Ark UI

A blogging platform in a fixed-height window whose slim sidebar opens with a Recently edited group of up to four pages, a Clear button and a draft count on Posts, above four admin groups.

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

Jump back to what you were editing with this blog admin sidebar for React with Ark UI. A window framed by a hairline with a plus mark on each corner holds a slim Sidebar for Inkdale, a blogging platform. Recently edited sits on top of Content, Media, Design and Users and holds up to four pages, newest first. Choosing a page anywhere pushes it to the top, moving it if it is already there. Clear empties the group to a quiet line. Posts shows a count of its drafts as a badge, derived from the post list, and each draft on the page has a Publish button that lowers it. Built from Sidebar, Sidebar Menu Badge, Button and Guides, with a CSS entrance only. For admin panels, CMSs and any rail with many pages and a few you keep returning to.

FAQ

How does Recently edited work?

Opening any page, from the group or from one of the four below, puts it at the top. A page already in the list moves up instead of repeating. The list keeps four; the fifth falls off the end and the status line names it.

What does Clear do?

It empties the group and leaves one quiet line, Nothing edited yet, in the same slot. The button stays but says the list is already empty if pressed again. The pages themselves are not touched; opening one starts the list again.

Where does the draft count come from?

It is the number of posts marked as drafts, shown as a badge on Posts and in its link's name and tooltip. Publishing a draft on the page lowers it, and at zero the badge goes away. It is never typed, so it cannot disagree with the list.

What happens when the sidebar folds to icons?

The rail keeps the four groups' pages as icons with tooltips and hides Recently edited. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on.

What stays in the page, and how do I connect it?

Everything. The posts and other lists are typed at the top of the file, and Publish only changes the block's state. Call your publish endpoint in the handler and store the recents list per person to make it real.

How does it work on a phone?

Below the medium breakpoint the sidebar is a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. Choosing a page closes the sheet and updates Recently edited. The status line under the page says what happened, and the sheet carries its own copy of it while it is open.