COMPONENT countdown

Countdown

Segmented countdown timer with urgency colors: red (<1h), amber (<6h), normal. Two variants: 'segments' (DAYS/HRS/MINS/SECS boxes) and 'text' (inline). Key props: expiry (Date), variant? ('segments' | 'text'). Pure presentation — no hook needed.

Install

$ npx shadcn@latest add https://ui.purrdict.xyz/r/countdown.json

Preview

Active market

02hrs

15min

30sec

Urgent (<5 min)

04min

05sec

After expiry

Settled

Usage

// Segmented countdown (DAYS / HRS / MINS / SECS with urgency colors)
import { Countdown } from "@/components/hip4/countdown"

<Countdown expiry={market.expiry} />

// Simple text countdown (legacy — "2h 15m 30s")
import { CountdownTimer } from "@/components/hip4/countdown"

<CountdownTimer
  expiry={market.expiry}
  onExpire={() => refetchMarket()}
/>

Props

Prop	Type	Description
`expiry`	Date	UTC expiry date

Dependencies

Registry components

hip4-format