Notion UI
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.

Previous

Tree

Next

Icon Block

On this page