Documentation

Cover

A component for displaying a cover image with an interactive picker.

Installation

pnpm add @notion-kit/cover

Examples

Notion Cover

<Cover  url={cover}  unsplashAPIKey={UNSPLASH_ACCESS_KEY}  onSelect={...}  onUpload={...}  onRemove={...}/>

Cover Picker

<CoverPicker unsplashAPIKey={UNSPLASH_ACCESS_KEY}>  <Button size="sm">    <ImageIcon className="mr-2 size-4" />    Change cover  </Button></CoverPicker>

API Reference

Cover

PropTypeDefaultDescription
unsplashAPIKey*string-The Unsplash access key from Unsplash Developers.
urlstring-The current URL of the cover image (controlled).
altstring-The fallback text to display.
onSelect(url: string) => void-Handler that is called when a cover image is selected or when a URL is submitted.
onUpload(file: File) => void-Handler that is called when a cover image is submitted.
onRemove() => void-Handler that is called when the remove button is clicked.

CoverPicker

PropTypeDefaultDescription
unsplashAPIKey*string-The Unsplash access key from Unsplash Developers.
onSelect(url: string) => void-Handler that is called when a cover image is selected or when a URL is submitted.
onUpload(file: File) => void-Handler that is called when a cover image is submitted.
onRemove() => void-Handler that is called when the remove button is clicked.

Tree

A collapsible, hierarchical list for organizing nested items like folders and files.

Icon Block

A block for icon, emoji, or image display.

On this page

InstallationExamplesNotion CoverCover PickerAPI ReferenceCoverCoverPicker