Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Weekly Content Queue Social Media Manager Profile Block for React

A social media manager profile as a weekly content queue: one tab for each account, seven day columns of scheduled posts with derived counts and a Gap word on empty days, and a popover on each post with a Move to day select that moves it and says so.

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

Show a manager's week of posts and let her rearrange it, with this content queue profile for React with Base UI. A compact header holds the title and one sentence, and the wide frame under it opens on the manager: initials, name, role, place and a badge with the posts scheduled this week. Tabs hold one account for each network she runs (three invented networks, each for a different client), and each opens that account's week: seven day columns, Monday to Sunday, of scheduled posts that show their account's initials, time, format and title. Every day's count is derived from the queue, and a day with nothing in it says Gap. Pressing a post opens a Popover with a Move to select of the week's days, where a full day (three posts) can't be chosen; picking one moves the post, updates both days' counts, says so in the polite line and puts focus back on the post. Below the large breakpoint the days become one column and then two. All three weeks sit in one grid cell with the others unseen, so switching accounts never changes the panel's height. It's built from Tabs, Popover, Native Select, Badge, Avatar and Guides, with a CSS entrance only. Nothing is posted; the manager, her clients, the networks and the posts are invented. For a content calendar, a posting schedule or any profile that plans a week.

FAQ

How do I fill it with my own queue?

Edit ACCOUNTS (a client, its initials and a network with its two-letter mark), START (made with post(id, account, day, time, format, title), where day is 0 for Monday to 6 for Sunday) and WEEK, the seven ISO dates the columns cover. The counts under each day name, the Gap word, the totals in the band and in the badge, and the sentence a move produces are all worked out from the posts. CAPACITY is the most a day can hold.

How does moving a post work?

Press a post and the popover opens with a Move to select. Choosing a day moves the post there at once (it keeps its time), closes the popover and says what happened, for example "Moved Cardamom or cinnamon bun to Thursday. Thursday has 1 post and Wednesday has 2." A day that already holds three posts is greyed out in the list, and if a move to a full day is asked for anyway, the post stays and the line says so. Escape closes the popover and returns focus to the post.

What stays local, and how do I make it real?

Everything. A move changes this page's state; nothing is scheduled with a network and a reload starts again from START. To make it real, call your scheduler in move, change the queue only when it answers and put a failure in the same status line. Time zones are not handled: the times are the times the account posts at.

Is it accessible?

Each day is a heading with its count, each post is a button named by its time, format and title and by its day, and the popover is a named dialog with a labelled select. The status line is a polite live region present from the start. Times keep their reading order in a right-to-left page, and the tab list follows the arrow keys.

How does it look on a phone?

The seven days become one list, each with its posts under its name and count, and a day with nothing in it shows a dashed place for a post. The tab names shorten to the network, and the three weeks still share one cell, so changing accounts never moves the status line.

  • Pro

    A creator profile with four follower tiles and nine drawn video thumbnails that a group of three buttons ranks by views, engagement or watch time, each with its number, its metric and a badge on the top one.

  • Pro

    A blogger profile that draws 12 months of pageviews as an area chart with a 6 or 12 month range, derived growth on the range before, and top articles that overlay their own monthly line and say their share of the best month.

  • Pro

    A brand ambassador profile as a media kit you can take: audience bars by age and region that add up to 100, three past partners with their reach and rates, a discount code with a real Copy button, and a download of a plain-text kit written from the same numbers.

  • Pro

    An animator profile as a frame scrubber: a drawn stage worked out from the frame number, a slider through 96 frames at 24 a second with the timecode and shot name, shots as buttons that jump to their first frame, and the credits.

  • Pro

    An architect profile as performance targets: tabs for three projects, each with energy, carbon and daylight targets drawn as bars with a tick, the figure reached, and Meets or Misses in words with a glyph, beside a rating worked out from the targets met.

  • Pro

    An author profile as a look inside: four books with drawn typographic covers, a read-only rating and an award badge, and a reading pane with a drop cap, a text size group and Next and Previous between two pages, beside a Follow toggle.