# Claim Timeline

> An insurance claim from report to payout: steps that are done, current, still to come or failed, with dates and notes, and the amount claimed.

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

An insurance claim from report to payout: steps that are done, current, still to come or failed,
with dates and notes, and the amount claimed.

## Example

```tsx
import { ClaimTimeline, Panel } from "@twentyfirstmedia/halo";

export default function Preview() {
  return (
    <Panel style={{ maxWidth: 560 }}>
      <ClaimTimeline
        title="Water damage in the kitchen"
        meta="Claim 2026-4418 · Nordhafen Insurance"
        amount={2340}
        steps={[
          {
            label: "Reported",
            date: new Date(2026, 9, 28),
            state: "done",
            note: "Photos and invoice uploaded",
          },
          { label: "Assessor visit", date: new Date(2026, 10, 4), state: "done" },
          { label: "Decision", state: "current", note: "Usually within 10 working days" },
          { label: "Payout", state: "todo" },
        ]}
      />
    </Panel>
  );
}
```

## Props

### ClaimTimeline

| Prop | Type | Notes |
| --- | --- | --- |
| `title` | `string` | Required |
| `meta?` | `ReactNode` | Reference and insurer under the title. |
| `amount?` | `number` |  |
| `currency?` | `string` |  |
| `steps` | `ClaimStep[]` | Required |
| `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. |