Schedule Card

Component

About

A recurring agent job with human-readable timing, next run, and pause controls.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Schedule Card to your project and fits it to your theme.

Code

How Schedule Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { useState } from 'react'
import ScheduleCard from '@/components/ui/schedule-card'

export default function Demo() {
  const [status, setStatus] = useState<'active' | 'paused'>('active')

  return (
    <ScheduleCard
      className="w-full max-w-lg"
      description="Research new agent-interface patterns and summarize meaningful changes."
      nextRun="Mon, Oct 5 · in 2 days"
      onToggle={() => setStatus((current) => (current === 'active' ? 'paused' : 'active'))}
      schedule="Every Monday at 09:00"
      status={status}
      timezone="London"
      title="Weekly component landscape"
    />
  )
}