Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Marketing Hub Sidebar Block for Solid

A marketing hub in a fixed-height window whose sidebar filters ten campaigns by four label toggles with counts and an All or Any switch, naming each campaign's labels and showing the chosen campaign's schedule as a table.

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

Slice campaigns by label with this marketing hub sidebar for Solid with Ark UI. A window framed by a hairline with a plus mark on each corner holds a Sidebar for Reachloom, a marketing hub, whose header has four Toggle Group labels, Launch, Evergreen, Seasonal and Paid, each with the number of campaigns that carry it, and an All or Any Segment Group for how they combine. Ten campaigns sit under it, narrowed to the ones that match ("6 of 10 campaigns", said after each change) and naming their labels in words; with no label chosen all ten show, and a combination nothing matches gives an Empty with Clear labels. Channels and Assets stay plain pages. The page shows the chosen campaign's schedule as a table of dates, items, channels and owners. Folded to icons, the rail keeps the matching campaigns. It's built from Sidebar, Toggle Group, Segment Group, Empty, Button, Avatar and Guides, with a CSS entrance only. For marketing tools, content calendars and any list sorted by tags.

FAQ

What is the difference between All and Any?

With All, a campaign must carry every chosen label; with Any, at least one. Launch and Paid on Any shows six campaigns, on All shows two. With no label chosen the switch has nothing to combine and all ten campaigns show.

What do the numbers on the labels mean?

The number of campaigns that carry that label, out of ten, whatever else is chosen. They are counted from the campaign list, not typed. The line under the controls counts the campaigns that match now, and the polite status line says it after each change.

What happens when nothing matches?

The list gives way to an empty state in the same place, with a heading, a hint to switch to Any or drop a label, and a Clear labels button. The labels, the switch and the plain pages stay usable, and the page keeps showing the chosen campaign with a note that the filter hides it from the rail.

What does the schedule table show?

One row per dated item: the date as a real time element, what is sent or posted, the channel and the owning team. On narrow pages the channel and owner fold under the item, so the table never scrolls sideways at phone width. Dates are fixed in the file.

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

Everything. The campaigns, labels and schedules are typed in the file; nothing is saved or sent. To make it real, load campaigns from your own source and keep the filtering function. The rows are links to # whose handler shows the page instead of navigating.

How does it work on a phone?

Below the medium breakpoint the sidebar is a sheet opened by the menu button in the top bar, with the labels and the list inside it. Choosing a campaign closes the sheet, and the status line under the page keeps the count of matching campaigns in view.