Today's doses on a rail grouped by time, with a refill countdown underneath. Built on Button, Number Roll and Text Swap.
When to use
- A patient app's daily medication log: what is due, what was taken and when, what was missed.
- When the supply on hand should count down as doses are logged.
When not to use
- Prescribing or editing a regimen: use a form.
- A week or month of adherence: use a calendar or heatmap.
Installation
npx shadcn add @eased-pro/medication-scheduleNeeds the @eased-pro registry and your Pro token in components.json. Create a token and copy the setup from your account .
Usage
import { MedicationSchedule } from "@/components/eased/medication-schedule/medication-schedule";export function Today({ medications, log, setLog }: Data) { return ( <MedicationSchedule title="Today" medications={medications} day={startOfToday} now={Date.now()} log={log} onLogChange={setLog} onRequestRefill={(id) => api.requestRefill(id)} /> );}API reference
MedicationSchedule
| Prop | Type | Default | Description |
|---|---|---|---|
medications | ScheduledMedication[] | { id, name, dose, schedule, instructions?, supply?, refillsLeft? }. schedule is "HH:MM" times. | |
day | number | Today at midnight (epoch ms). | |
now | number | The current time; new doses are stamped with it. | |
log / defaultLog / onLogChange | DoseRecord[] | [] | { medId, time, takenAt } per taken dose. |
graceMinutes | number | 120 | How late a dose may be before it reads missed. |
onRequestRefill | (medId) => void | Shows the refill action for the medication that runs out first. | |
title | ReactNode | Leading side of the toolbar. | |
locale / timeZone | string | "en-US" / "UTC" | |
className | string | "" |
Keyboard
| Key | Action |
|---|---|
Tab | Moves through each dose's action and the refill action. |
Enter / Space | Take a dose; on a taken dose, mark it not taken. |
Focus stays on the dose: Take hands it to the taken stamp and back.
Accessibility
- Each time is a labelled section; each action is named with the medication and dose.
- Missed doses say "Not taken" in text, not only in colour.
- The taken count is a polite live region.
Motion
Taking a dose draws a circled check (300ms) and stamps the time; when every dose at a time is taken, its node fills and a check pops in on the bouncy spring. A missed dose re-tints to warning over 200ms. The taken count, doses left and days left roll. Request refill morphs to Requested. Reduced motion: no drawing or pop.
Notes for AI
Pick this for a daily dose log. Store takenAt per dose and pass now from your clock; the block decides due, missed and later from graceMinutes.
Don't add dosing advice or reminders in copy, and don't use danger colours for missed doses.
Related
- Care Team: where refill requests go.
- Onboarding Checklist: the same tick-and-strike rhythm for tasks.