# Medication Schedule

> An animated medication schedule for React and shadcn, with today's doses by time and a refill countdown.

Today's doses on a rail grouped by time. Taking one draws its check and stamps the time; a dose past its window re-tints to warning; the refill bar's days left roll down as doses are taken.

- Tier: Eased Pro
- Interaction: Press
- Page: https://eased.dev/components/medication-schedule
- Installs: motion

## Install

Medication Schedule ships with Eased Pro (https://eased.dev/#pricing). Members add the `@eased-pro` registry with their token (https://eased.dev/account), then run:

```bash
npx shadcn add @eased-pro/medication-schedule
```

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.

## Usage

```tsx example.tsx
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](/components/care-team): where refill requests go.
- [Onboarding Checklist](/components/onboarding-checklist): the same tick-and-strike rhythm for tasks.