You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
<Buttonintent="none"outlinedrightIcon="arrow-right"href="/learn/docs/writing-content/components/download">Read the docs</Button>
25
+
5
26
## `open-by-default` option for collapsed sections
6
27
7
28
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.
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.
4
4
---
5
5
6
6
<Markdownsrc="/snippets/agent-directive.mdx"/>
7
7
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.
9
9
10
10
<Info>
11
11
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).
12
12
</Info>
13
13
14
14
## Usage
15
15
16
+
### Single file
17
+
16
18
<divclassName="highlight-frame">
17
-
<Downloadsrc="./all-about-ferns.pdf">
18
-
<Buttonintent="primary">Download PDF</Button>
19
-
</Download>
19
+
<divclassName="highlight-frame-content">
20
+
<Downloadsrc="./all-about-ferns.pdf">
21
+
<Buttonintent="primary">Download PDF</Button>
22
+
</Download>
23
+
</div>
20
24
</div>
21
25
22
26
```jsx Markdown
@@ -25,16 +29,39 @@ For information on how to embed images, PDFs, and other assets, check out the do
25
29
</Download>
26
30
```
27
31
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.
Path to your local asset (relative to current MDX file). The asset must be located within the `fern` folder.
53
+
<ParamFieldpath="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
+
<ParamFieldpath="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.
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.
36
63
</ParamField>
37
64
38
65
<ParamFieldpath="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.
0 commit comments