Download | Fern Documentation

The <Download> component lets users download assets like PDFs directly from your documentation. You can use it for single files or bundle multiple files into a ZIP download.

For information on how to embed images, PDFs, and other assets, check out the documentation on Rich media in Markdown.

Usage

Single file

Markdown

1 <Download src="./all-about-ferns.pdf">
2   <Button intent="primary">Download PDF</Button>
3 </Download>

Multiple files as ZIP

Use the sources prop to bundle multiple files into a single ZIP download. The component fetches each file client-side and packages them into a ZIP archive using fflate.

This is useful when you want users to download a collection of related assets — such as brand logos, SDK files, or configuration templates — without needing to host a pre-built ZIP file.

Markdown

1 <Download
2   sources={[
3     "https://example.com/assets/logo-dark.svg",
4     "https://example.com/assets/logo-light.svg",
5     "https://example.com/assets/icon.svg"
6   ]}
7   filename="brand-assets.zip"
8 >
9   <Button intent="primary">Download brand assets</Button>
10 </Download>

Properties

src

string

Path to a single file for download (relative to the current MDX file). The asset must be located within the fern folder. Use src for single-file downloads. Mutually exclusive with sources — you must provide one or the other.

sources

string[]

An array of publicly accessible URLs to bundle into a ZIP download. Use sources for multi-file downloads — the component fetches each URL client-side and packages them into a ZIP archive. Mutually exclusive with src. If only one URL is provided, it behaves like src (downloads the file directly without zipping). The filename for each file inside the ZIP is derived from the last segment of its URL (e.g., logo-dark.svg). If any file fails to fetch, the entire download will fail.

children

React.ReactNodeRequired

The text or element to display as the click target for the download. Typically a <Button> or styled link.

filename

string

The filename for the downloaded file. When used with sources, this sets the name of the ZIP file (defaults to download.zip). When used with src, it overrides the original asset filename.