Sidebar

Document.Annotation.Sidebar

Container for the annotation list. Renders default children if none provided.

// Default
<Document.Annotation.Sidebar />

// Custom structure
<Document.Annotation.Sidebar className="w-96">
  <Document.Annotation.Sidebar.Header>
    <h3>My Notes</h3>
  </Document.Annotation.Sidebar.Header>
  <Document.Annotation.Sidebar.List />
  <Document.Annotation.Sidebar.Empty>
    No annotations yet
  </Document.Annotation.Sidebar.Empty>
</Document.Annotation.Sidebar>

Props

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

Document.Annotation.Sidebar.Header

Header section of the sidebar.

// Default (shows "Annotations" + count)
<Document.Annotation.Sidebar.Header />

// Custom
<Document.Annotation.Sidebar.Header className="p-4 border-b">
  <div className="flex justify-between">
    <h3>Review Notes</h3>
    <Badge>{annotations.length}</Badge>
  </div>
</Document.Annotation.Sidebar.Header>

Props

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

Document.Annotation.Sidebar.List

Container for annotation cards. Auto-renders cards if no children provided.

// Default
<Document.Annotation.Sidebar.List />

// Custom rendering
<Document.Annotation.Sidebar.List className="divide-y">
  {annotations.map((annotation) => (
    <Document.Annotation.Sidebar.Card key={annotation.id} annotation={annotation}>
      {/* custom card content */}
    </Document.Annotation.Sidebar.Card>
  ))}
</Document.Annotation.Sidebar.List>

Props

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

Document.Annotation.Sidebar.Empty

Shown when there are no annotations.

<Document.Annotation.Sidebar.Empty className="p-8 text-center">
  <MessageSquare className="h-8 w-8 mx-auto mb-2 opacity-50" />
  <p>Select text to add a note</p>
</Document.Annotation.Sidebar.Empty>

Props

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

Document.Annotation.Sidebar.Card

Renders a single annotation card. Provides context for child components via useAnnotationCard().

<Document.Annotation.Sidebar.Card annotation={annotation} className="p-4">
  <Document.Annotation.Sidebar.Card.Citation />
  <Document.Annotation.Sidebar.Card.Textarea placeholder="Add note..." />
  <Document.Annotation.Sidebar.Card.Delete />
</Document.Annotation.Sidebar.Card>

Props

Prop	Type	Description
`annotation`	`AnnotationData`	The annotation to render (required)
`className`	`string`	Additional classes
`children`	`ReactNode`	Custom card content

Document.Annotation.Sidebar.Card.Header

Displays author avatar and name. When the author name is "Mobius", the Mobius logo is shown instead of an avatar. Uses defaultAuthor as a fallback if the annotation has no author set.

// Default (shows author avatar and name)
<Document.Annotation.Sidebar.Card.Header />

// Custom styling
<Document.Annotation.Sidebar.Card.Header className="mb-4" />

Props

Prop	Type	Description
`className`	`string`	Additional classes

Document.Annotation.Sidebar.Card.Citation

Displays the cited text from the document.

// Default (shows quoted text)
<Document.Annotation.Sidebar.Card.Citation />

// Custom
<Document.Annotation.Sidebar.Card.Citation className="text-xs italic text-muted-foreground">
  {/* children override default content */}
</Document.Annotation.Sidebar.Card.Citation>

Props

Prop	Type	Description
`className`	`string`	Additional classes
`children`	`ReactNode`	Custom citation content

Document.Annotation.Sidebar.Card.Textarea

Editable textarea for the annotation text.

<Document.Annotation.Sidebar.Card.Textarea
  placeholder="Add your annotation..."
  className="min-h-[100px]"
/>

Props

Prop	Type	Description
`className`	`string`	Additional classes
`placeholder`	`string`	Placeholder text

Document.Annotation.Sidebar.Card.Delete

Delete button for the annotation.

// Default
<Document.Annotation.Sidebar.Card.Delete />

// Custom content
<Document.Annotation.Sidebar.Card.Delete className="text-destructive">
  <Trash2 className="h-4 w-4" />
  Remove
</Document.Annotation.Sidebar.Card.Delete>

Props

Prop	Type	Description
`className`	`string`	Additional classes
`children`	`ReactNode`	Custom button content

Sidebar

On this page