# Document List

> Important papers (IDs, contracts, policies, certificates) with category, holder and expiry: "Expired", "Expires in 19 days" or "Valid until May 2031".

Component · Life · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/DocumentList/)

Important papers (IDs, contracts, policies, certificates) with category, holder and expiry:
"Expired", "Expires in 19 days" or "Valid until May 2031".

- Set `today` for server rendering; `soon` (default 60 days) marks documents to renew.
- `onOpen(id)` makes each document a button.

## Example

```tsx
import { DocumentList, Panel, registerIcons } from "@twentyfirstmedia/pro";
import { idCard } from "@twentyfirstmedia/ui-core/icons";

registerIcons({ idCard });

export default function Preview() {
  return (
    <Panel title="Documents" subtitle="Family" style={{ maxWidth: 620 }}>
      <DocumentList
        today={new Date(2026, 10, 13)}
        onOpen={() => {}}
        documents={[
          {
            id: "pass",
            title: "Passport",
            category: "ID",
            icon: "idCard",
            holder: "Lena",
            expires: new Date(2026, 11, 2),
          },
          {
            id: "card",
            title: "ID card",
            category: "ID",
            icon: "idCard",
            holder: "Mara",
            expires: new Date(2031, 4, 1),
          },
          {
            id: "lic",
            title: "Driving licence",
            category: "ID",
            icon: "idCard",
            holder: "Jonas",
            expires: new Date(2026, 9, 1),
          },
          {
            id: "rent",
            title: "Rental contract",
            category: "Home",
            icon: "home",
            meta: "PDF · 1.2 MB",
          },
          {
            id: "ins",
            title: "Household contents policy",
            category: "Insurance",
            icon: "shield",
            meta: "PDF · 240 KB",
          },
        ]}
      />
    </Panel>
  );
}
```

## Props

### DocumentList

| Prop | Type | Notes |
| --- | --- | --- |
| `documents` | `LifeDocument[]` | Required |
| `today?` | `Date \| string \| number` | The day to count expiry from (default: now). |
| `soon?` | `number` | Days ahead that count as expiring soon (default 60). |
| `onOpen?` | `(id: string) => void` |  |
| `label?` | `string` | Accessible name (default "Documents"). |
| `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. |