diff --git a/docs/advanced-features/dynamic-import.md b/docs/advanced-features/dynamic-import.md
index b6ef8e5122e2da8b69c0e4310c7668dc2f7a7c1e..5551a084daeee96ee4d1327d4fc3569dfe411122 100644
--- a/docs/advanced-features/dynamic-import.md
+++ b/docs/advanced-features/dynamic-import.md
@@ -4,17 +4,49 @@ description: Dynamically import JavaScript modules and React Components and spli
 
 # Dynamic Import
 
-<details>
+<details open>
   <summary><b>Examples</b></summary>
   <ul>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-dynamic-import">Dynamic Import</a></li>
   </ul>
 </details>
 
-Next.js supports ES2020 [dynamic `import()`](https://github.com/tc39/proposal-dynamic-import) for JavaScript. With it you can import JavaScript modules (inc. React Components) dynamically and work with them. They also work with SSR.
+Next.js supports ES2020 [dynamic `import()`](https://github.com/tc39/proposal-dynamic-import) for JavaScript. With it you can import JavaScript modules dynamically and work with them. They also work with SSR.
+
+In the following example, we implement fuzzy search using `fuse.js` and only load the module dynamically in the browser after the user types in the search input:
+
+```jsx
+import { useState } from 'react'
+
+const names = ['Tim', 'Joe', 'Bel', 'Max', 'Lee']
+
+export default function Page() {
+  const [results, setResults] = useState()
+
+  return (
+    <div>
+      <input
+        type="text"
+        placeholder="Search"
+        onChange={async (e) => {
+          const { value } = e.currentTarget
+          // Dynamically load fuse.js
+          const Fuse = (await import('fuse.js')).default
+          const fuse = new Fuse(names)
+
+          setResults(fuse.search(value))
+        }}
+      />
+      <pre>Results: {JSON.stringify(results, null, 2)}</pre>
+    </div>
+  )
+}
+```
 
 You can think of dynamic imports as another way to split your code into manageable chunks.
 
+React components can also be imported using dynamic imports, but in this case we use it in conjunction with `next/dynamic` to make sure it works just like any other React Component. Check out the sections below for more details on how it works.
+
 ## Basic usage
 
 In the following example, the module `../components/hello` will be dynamically loaded by the page:
diff --git a/examples/with-dynamic-import/package.json b/examples/with-dynamic-import/package.json
index de6c17c190be3f85f8ca1fbe6b7d3eba3d6c5811..e10d1179ff95755ed6fbee15cfb05c18dfb80736 100644
--- a/examples/with-dynamic-import/package.json
+++ b/examples/with-dynamic-import/package.json
@@ -8,10 +8,10 @@
     "start": "next start"
   },
   "dependencies": {
+    "fuse.js": "6.4.1",
     "next": "latest",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
   },
-  "author": "",
   "license": "MIT"
 }
diff --git a/examples/with-dynamic-import/pages/index.js b/examples/with-dynamic-import/pages/index.js
index 2461e6d5b0744f5de2e005b75c40c10e8c9176ce..ec04c5878a53adad6959bcaad16d162f2ad6f4dd 100644
--- a/examples/with-dynamic-import/pages/index.js
+++ b/examples/with-dynamic-import/pages/index.js
@@ -18,9 +18,12 @@ const DynamicComponent4 = dynamic(() => import('../components/hello4'))
 
 const DynamicComponent5 = dynamic(() => import('../components/hello5'))
 
+const names = ['Tim', 'Joe', 'Bel', 'Max', 'Lee']
+
 const IndexPage = () => {
   const [showMore, setShowMore] = useState(false)
   const [falsyField] = useState(false)
+  const [results, setResults] = useState()
 
   return (
     <div>
@@ -41,6 +44,23 @@ const IndexPage = () => {
       {/* Load on demand */}
       {showMore && <DynamicComponent5 />}
       <button onClick={() => setShowMore(!showMore)}>Toggle Show More</button>
+
+      {/* Load library on demand */}
+      <div style={{ marginTop: '1rem' }}>
+        <input
+          type="text"
+          placeholder="Search"
+          onChange={async (e) => {
+            const { value } = e.currentTarget
+            // Dynamically load fuse.js
+            const Fuse = (await import('fuse.js')).default
+            const fuse = new Fuse(names)
+
+            setResults(fuse.search(value))
+          }}
+        />
+        <pre>Results: {JSON.stringify(results, null, 2)}</pre>
+      </div>
     </div>
   )
 }