Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

CRUD blocks

Pro

Campaign Manager CRUD Block for Solid

A small agency's campaigns under a budget and spend strip: a two-step form for a new draft, a budget stepper that can't go under what is spent, Pause, Resume and End behind a confirm, and Delete only for drafts.

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

Keep a handful of campaigns in order, with this campaign manager for Solid with Ark UI. A hairline frame with a plus mark on each corner opens with two figures, the open budget and what is spent so far with its percentage, both added up from the list. New campaign, the only Shine Button, swaps the list for a two-step form inside the same frame: a name and a channel, then a budget and dates, where the end must come after the start and after the fourteenth of October. A started campaign reads "Spent $1,240 of $3,000, 41%" and "Ends in 12 days", has a budget stepper that can't go under what is already spent, and a Pause or Resume. End asks first in an Alert Dialog and keeps the campaign as Ended. Only a Draft can be deleted; a started campaign's Delete is aria-disabled and says "End it instead". A native table becomes cards below the medium breakpoint, a Native Select filters by status, and the foot offers an Undo. The bands are ruled by Guides. For agencies, marketing teams and any budgets that start, pause and end.

FAQ

How do I fill it with my campaigns?

Edit START_LINES: name, channel, budget, spent, start day, end day and status (Draft, Live, Paused or Ended). The strip, the percentages and "Ends in 12 days" are derived from them and from AS_OF; nothing reads the clock. The limits of a budget are MIN_BUDGET and MAX_BUDGET, and the stepper moves by STEP.

What does the two-step form check?

Step 1 needs a name that no other campaign uses. Step 2 needs a budget between the limits and a start and an end, with the end after the start and after the as-of day. Each refusal is a sentence under the fields, and Back keeps what you typed. Create draft adds the campaign at the top as a Draft.

Why End instead of Delete?

A campaign that has started has spend and history. End stops it today, keeps it in the list as Ended and can't be undone from the row, though the foot's Undo takes it back in this demo. Delete is only for drafts, and on a started campaign it is aria-disabled with the reason, so a keyboard user hears why.

Why does the budget refuse to go down?

The stepper never lets a budget fall under what is already spent, and the limits still apply. The foot says which rule stopped it, such as "Spring bulb launch has spent $1,240; the budget can't go under it".

What stays local, and how do I wire a real save?

Campaigns live in state in this tab and a reload restores the six; no ad is bought or stopped. In your app call your API from create, move, finish, remove and stepBudget, and apply the same rules on the server.

All 100 crud blocks