Installation

pnpmnpmyarnbun
bunx --bun shadcn@latest add https://ui.ahmet.studio/r/cron-builder
Copy

Usage

Copyimport { CronBuilder, type CronValue } from "@/components/ui/cron-builder";

export function Demo() {
  const [value, setValue] = React.useState<CronValue>({
    expression: "0 9 * * 1",
    mode: "weekly",
  });

  return <CronBuilder value={value} onChange={setValue} />;
}

Why this is unique

There are no shadcn-compatible cron builders out there. This one ships:

• Bidirectional sync — typing a raw expression updates the visual mode automatically.
• Live validation — invalid expressions are flagged in real time.
• Human readable preview — humanizeCron(expression) is exported as a utility.
• Mode locking — restrict to a subset of modes (e.g. only daily and weekly).
• No external cron parser — pure TypeScript, ~3kb gzipped.

Props

Helpers

Copyimport { humanizeCron } from "@/components/ui/cron-builder";

humanizeCron("0 9 * * 1");
humanizeCron("*/15 * * * *");