Skip to content

Commit 92a2153

Browse files
devin-ai-integration[bot]fern-supportbot_apkdevalog
authored
Document multi-file ZIP download support for Download component (#4222)
Co-authored-by: fern-support <support@buildwithfern.com> Co-authored-by: bot_apk <apk@cognition.ai> Co-authored-by: Devin Logan <devinannlogan@gmail.com>
1 parent 2c7611e commit 92a2153

2 files changed

Lines changed: 58 additions & 10 deletions

File tree

fern/products/docs/pages/changelog/2026-03-12.mdx

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,28 @@
11
---
2-
tags: ["navigation", "configuration", "docs.yml"]
2+
tags: ["components", "navigation", "configuration", "docs.yml"]
33
---
44

5+
## Multi-file ZIP downloads
6+
7+
The `<Download>` component now supports bundling multiple files into a single ZIP download using the new `sources` prop. 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.
8+
9+
Pass an array of publicly accessible URLs to `sources`, and the component fetches each file client-side and packages them into a ZIP archive:
10+
11+
```jsx Markdown
12+
<Download
13+
sources={[
14+
"https://example.com/assets/logo-dark.svg",
15+
"https://example.com/assets/logo-light.svg",
16+
"https://example.com/assets/icon.svg"
17+
]}
18+
filename="brand-assets.zip"
19+
>
20+
<Button intent="primary">Download brand assets</Button>
21+
</Download>
22+
```
23+
24+
<Button intent="none" outlined rightIcon="arrow-right" href="/learn/docs/writing-content/components/download">Read the docs</Button>
25+
526
## `open-by-default` option for collapsed sections
627

728
Sections and folders in your sidebar navigation support a new `collapsed: open-by-default` value. Sections configured with this value start expanded but display a toggle so users can collapse them.
Lines changed: 36 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,26 @@
11
---
22
title: Download
3-
description: The Download component enables users to download PDFs and files from your documentation. Simple setup with custom filenames.
3+
description: The Download component enables users to download PDFs, files, and multi-file ZIP bundles from your documentation.
44
---
55

66
<Markdown src="/snippets/agent-directive.mdx"/>
77

8-
The `<Download>` component lets users download assets like PDFs directly from your documentation.
8+
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.
99

1010
<Info>
1111
For information on how to embed images, PDFs, and other assets, check out the documentation on [Rich media in Markdown](/learn/docs/writing-content/markdown-media).
1212
</Info>
1313

1414
## Usage
1515

16+
### Single file
17+
1618
<div className="highlight-frame">
17-
<Download src="./all-about-ferns.pdf">
18-
<Button intent="primary">Download PDF</Button>
19-
</Download>
19+
<div className="highlight-frame-content">
20+
<Download src="./all-about-ferns.pdf">
21+
<Button intent="primary">Download PDF</Button>
22+
</Download>
23+
</div>
2024
</div>
2125

2226
```jsx Markdown
@@ -25,16 +29,39 @@ For information on how to embed images, PDFs, and other assets, check out the do
2529
</Download>
2630
```
2731

32+
### Multiple files as ZIP
33+
34+
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](https://github.com/101arrowz/fflate).
35+
36+
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.
37+
38+
```jsx Markdown
39+
<Download
40+
sources={[
41+
"https://example.com/assets/logo-dark.svg",
42+
"https://example.com/assets/logo-light.svg",
43+
"https://example.com/assets/icon.svg"
44+
]}
45+
filename="brand-assets.zip"
46+
>
47+
<Button intent="primary">Download brand assets</Button>
48+
</Download>
49+
```
50+
2851
## Properties
2952

30-
<ParamField path="src" type="string" required={true}>
31-
Path to your local asset (relative to current MDX file). The asset must be located within the `fern` folder.
53+
<ParamField path="src" type="string">
54+
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.
55+
</ParamField>
56+
57+
<ParamField path="sources" type="string[]">
58+
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.
3259
</ParamField>
3360

3461
<ParamField path="children" type="React.ReactNode" required={true}>
35-
The text or element to display as the click target for the download.
62+
The text or element to display as the click target for the download. Typically a `<Button>` or styled link.
3663
</ParamField>
3764

3865
<ParamField path="filename" type="string">
39-
The filename to use for the downloaded asset. If not provided, the filename will be the same as the asset's name.
66+
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.
4067
</ParamField>

0 commit comments

Comments
 (0)