Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Scheduled Task Cron Notification Block for React

A scheduled task read back in plain words: a select of four presets rewrites the cron expression, the sentence and the next three runs in UTC, with the last run and a Run now that queues a manual run in the demo.

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

Make a schedule readable before anyone relies on it, with this scheduled task notification for React with Base UI. It is Cronfield, a job scheduler, in a hairline frame with a plus mark on each corner. A Native Select offers four presets: Every day at 03:00, Every Monday at 09:00, Every 15 minutes and First of the month. Choosing one rewrites the cron expression in mono, the sentence that says what it means and the next three runs, each worked out in UTC from the page's fixed now. Under them a Data List holds the last run and its result in a Badge. Run now is the one Shine Button: it says "Queued (demo)" and counts the manual runs on the page. Guides draw the lines. For job schedulers, report builders and any form that takes a cron.

FAQ

How do I add my own schedules?

Edit PRESETS: each has an id, a label, its cron text, a sentence, a kind of period or month, an anchor (a run you know, in UTC) and, for a period, its length in milliseconds. AS_OF is the page's fixed now, and the last and next runs are counted from the anchor, so they read the same for everyone. In your app compute them with your scheduler's own library.

What does Run now do?

Nothing leaves the page. It says "Queued (demo)" and how many manual runs have been asked for on this page; no job exists. The last run and its result are typed. In your app call your scheduler's trigger endpoint from runNow and put its answer in the status line.

Why are all the times in UTC?

A cron expression has no time zone of its own, and a page that guessed the viewer's would read differently for everyone. Every time here is UTC and says so. In your app format them in the zone your scheduler runs in, and show that zone next to the expression.

Can I type my own cron?

Not in this block: it reads four presets back in words, which is the part that is easy to get wrong. To accept any expression, add a field, parse it with a cron library and keep the same three outputs (the sentence, the next runs and the last run).

Is it accessible?

The select has a visible label and is a real select element, so it works with any keyboard or screen reader. The runs are an ordered list with machine-readable times, the status line says the next run whenever you choose, and Run now stays focusable.

  • Pro

    A job queue's four counters that roll when they change, a progress bar of done over total, a Pause queue that moves running jobs to Paused and re-derives the counts, and a job list with Retry on the failed one.

  • Pro

    A meeting about to start in a scheduling app: a catalog Timer counting down to it with a Pause, the agenda with start times, who is coming with an RSVP, Join call, Snooze 5 minutes and a real calendar file to download.

  • Pro

    A board pack due tomorrow evening in two hairline cells: a risk word, a progress bar and the working hours to go on one side, subtask checkboxes with their hours on the other, so ticking one recomputes the risk, plus a popover to request an extension.

  • Pro

    A maintenance window you read in your own time zone: a select of four zones re-writes the start, end and length, a switch sets a reminder an hour before, and six services show Degraded or No impact.

  • Pro

    A medal shelf for a learning platform after a learner finishes a first project: eight drawn medals in a hairline grid with a New badge on the latest, and a popover on each medal with its criteria, a progress bar and the day it was earned.

  • Pro

    A project's history as a vertical timeline split in two: six event types as chips with live counts in a start column, and the timeline of who did what beside them, filtered by the types you press, with Load earlier events and a designed empty state.