## Overview [#overview]

`Document.Annotation.Sidebar` renders the annotation list. Without children, it renders the default list and cards. With children, use the namespaced sidebar parts to build a custom structure while keeping card behavior and context.

## Usage [#usage]

```tsx
<Document.Annotation.Sidebar />
```

```tsx
<Document.Annotation.Sidebar>
  <Document.Annotation.Sidebar.Header />
  <Document.Annotation.Sidebar.List>
    {annotations.map((annotation) => (
      <Document.Annotation.Sidebar.Card
        annotation={annotation}
        key={annotation.id}
      />
    ))}
  </Document.Annotation.Sidebar.List>
  <Document.Annotation.Sidebar.Empty />
</Document.Annotation.Sidebar>
```

## API Reference [#api-reference]

### Document.Annotation.Sidebar [#documentannotationsidebar]

| Prop        | Type        | Description            |
| ----------- | ----------- | ---------------------- |
| `className` | `string`    | Additional classes     |
| `children`  | `ReactNode` | Custom sidebar content |

### Document.Annotation.Sidebar.Header [#documentannotationsidebarheader]

Renders the sidebar heading and annotation count.

| Prop        | Type        | Description           |
| ----------- | ----------- | --------------------- |
| `className` | `string`    | Additional classes    |
| `children`  | `ReactNode` | Custom header content |

### Document.Annotation.Sidebar.List [#documentannotationsidebarlist]

Positions and renders annotation cards.

| Prop        | Type        | Description         |
| ----------- | ----------- | ------------------- |
| `className` | `string`    | Additional classes  |
| `children`  | `ReactNode` | Custom list content |

### Document.Annotation.Sidebar.Empty [#documentannotationsidebarempty]

Empty state shown when there are no annotations.

| Prop        | Type        | Description                |
| ----------- | ----------- | -------------------------- |
| `className` | `string`    | Additional classes         |
| `children`  | `ReactNode` | Custom empty state content |

### Document.Annotation.Sidebar.Card [#documentannotationsidebarcard]

Renders one annotation card.

| Prop         | Type             | Description              |
| ------------ | ---------------- | ------------------------ |
| `annotation` | `AnnotationData` | The annotation to render |
| `className`  | `string`         | Additional classes       |
| `children`   | `ReactNode`      | Custom card content      |