Data display
Due countdown
A small chip that shows how long until a task is due and changes color as the clock runs down — neutral days out, blue within a few, amber the day of, red in the final hour (pulsing), and overdue when the deadline passes. Time pressure you can read at a glance, anywhere a date appears.
npx shadcn@latest add @orbit/due-countdownOverview
Live — the top chip ticks down on its own; drag the slider to sweep a deadline from two weeks out all the way to overdue and watch the color and icon change.
Every state
The six moments of a deadline, pinned to a fixed clock via the now prop so the grid never drifts.
The tiers
Five bands map remaining time to the theme's semantic colors, so a glance down a list sorts itself by what needs attention.
Sizes
md for table rows and cards; lg where the countdown is the headline.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| due | Date | number | string | — | The deadline. Overdue chips keep counting up in red. |
| now | Date | number | string | — | Fixed clock override — the chip becomes deterministic and never ticks. Use for demos, tests, and snapshots. |
| size | "md" | "lg" | "md" | 26px chip or 34px chip. |
| pulse | boolean | true | Pulse the icon in the critical tier (final hour). The global reduced-motion guard also disables it. |
| tickInterval | number | 30000 | Uncontrolled tick cadence in ms — the text is minute-granular, so twice a minute is plenty. |
| …rest | HTMLAttributes<HTMLSpanElement> | — | Forwarded to the root span, including ref and className. |
Usage
The chip signals urgency, but color alone isn't enough — the text carries the same meaning for anyone who can't distinguish the hues.
Pair color with text
“Due in 42m” says the same thing the red does. Never let hue be the only signal — it fails for color-blind users.
Pulse everything
Reserve the pulse for the final hour. If every chip animates, the motion stops meaning “urgent” and just adds noise.
Round sensibly
“2d 18h” far out, “42m” up close. Show the precision that matches the urgency rather than a raw timestamp.
Forget the overdue case
A countdown that stops at zero hides the worst state. Keep counting up in red so a missed deadline stays visible.
Keyboard & accessibility
Every tier changes icon and wording along with color, and the pulse respects reduced motion.