Skip to content
Twentyfirst UIHalo

Deadline List

Life · DeadlineList, Panel

View as Markdown

Bills, renewals, notice periods and expiring documents in date order, each with "Today", "In 12 days" or "Overdue by 3 days" in words.

  • Set today for server rendering and stable output; soon (default 14 days) marks what is near.
  • onDone(id) adds "Mark … done"; done items stay, struck through.

Deadlines

Next 90 days

  • 2NovElectricityBill€99
  • 10NovIncome tax returnTax · Extension possibleOverdue by 3 days
  • 13NovCar inspectionCarToday
  • 20NovGym: last day to cancelContractIn 7 days
  • 1DecRentBill€1,150In 18 days
  • 14FebPassport renewalDocument · LenaIn 93 days

Props

DeadlineList

PropTypeNotes
itemsDeadlineItem[]Required
today?Date | string | numberThe day to count from (default: now). Set it for server rendering and stable output.
soon?numberDays ahead that count as soon (default 14).
currency?string
onDone?(id: string) => void
label?stringAccessible name (default "Deadlines").
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

Panel

PropTypeNotes
side?boolean
title?string
subtitle?string
action?ReactNode
children?ReactNode
surface?Surface`"glass"`: translucent glass over what is behind (maps, 3D, video, photos); `"solid"` opts out inside a glass `UIProvider`.
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.