# Deadline List

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

Component · Life · Halo kit · [Live page](https://ui.twentyfirst.media/halo/components/DeadlineList/)

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.

## Example

```tsx
import * as React from "react";
import { DeadlineList, Panel } from "@twentyfirstmedia/halo";
import type { DeadlineItem } from "@twentyfirstmedia/halo";

const today = new Date(2026, 10, 13);

export default function Preview() {
  const [items, setItems] = React.useState<DeadlineItem[]>([
    {
      id: "tax",
      title: "Income tax return",
      kind: "Tax",
      date: new Date(2026, 10, 10),
      note: "Extension possible",
    },
    { id: "car", title: "Car inspection", kind: "Car", date: new Date(2026, 10, 13) },
    { id: "gym", title: "Gym: last day to cancel", kind: "Contract", date: new Date(2026, 10, 20) },
    { id: "rent", title: "Rent", kind: "Bill", date: new Date(2026, 11, 1), amount: 1150 },
    {
      id: "id",
      title: "Passport renewal",
      kind: "Document",
      date: new Date(2027, 1, 14),
      note: "Lena",
    },
    {
      id: "elec",
      title: "Electricity",
      kind: "Bill",
      date: new Date(2026, 10, 2),
      amount: 99,
      done: true,
    },
  ]);
  return (
    <Panel title="Deadlines" subtitle="Next 90 days" style={{ maxWidth: 620 }}>
      <DeadlineList
        today={today}
        items={items}
        onDone={(id) => setItems((all) => all.map((d) => (d.id === id ? { ...d, done: true } : d)))}
      />
    </Panel>
  );
}
```

## Props

### DeadlineList

| Prop | Type | Notes |
| --- | --- | --- |
| `items` | `DeadlineItem[]` | Required |
| `today?` | `Date \| string \| number` | The day to count from (default: now). Set it for server rendering and stable output. |
| `soon?` | `number` | Days ahead that count as soon (default 14). |
| `currency?` | `string` |  |
| `onDone?` | `(id: string) => void` |  |
| `label?` | `string` | Accessible name (default "Deadlines"). |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### Panel

| Prop | Type | Notes |
| --- | --- | --- |
| `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?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |