Cover

Installation

pnpm add @notion-kit/ui

pnpm add @notion-kit/ui

Examples

Notion Cover

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

<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>

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

API Reference

Cover

Prop	Type	Default	Description
`unsplashAPIKey`*	`string`	-	The Unsplash access key from Unsplash Developers.
`url`	`string`	-	The current URL of the cover image (controlled).
`alt`	`string`	-	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

Prop	Type	Default	Description
`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.

Cover

Installation

Examples

Notion Cover

Cover Picker

API Reference

Cover

CoverPicker

On this page