base-ui
base-ui copied to clipboard
mui
[docs-infra] Add Search Functionality from docs-infra
[!NOTE] This PR is a work in progress using https://github.com/mui/mui-public/pull/901
Adds a search index and serach bar to the docs site.
Also populates navigation from the index. Whenever a new item is added to the index, it is automatically marked [New]. Try creating a new component page in development mode and see it automatically appear in the nav bar and search. Update the title and see it hot reload.
All the data shown in the above markdown file is included in the search index and can be used as results.
Screenshots
Screencast From 2025-11-23 20-22-04.webm
Performance
Index size: 15.6KB (75KB uncompressed)
Index loads into memory in 15ms-20ms
Searches in less than 1ms
With very quick benchmarking, there is a small increase in the uncached build time, as would be expected to generate the index. But the cached build sees no increase in build time.
Build Time Before: 50s / 30s cached
Build Time After: 56s / 30s cached
To ensure the files are not edited manually or become out of sync, a CI test should run in parallel with the build to run pnpm docs:validate. if out of sync, it will instruct you what command to run.
Experiments with Vector Search (not included in this PR)
To increase matches for indirect words, like profile -> avatar, person -> avatar, etc, we could add vectors that measure similarity.
Index size grows to 500KB / 226KB gzip (uncompressed 470KB larger, compressed 220KB larger)
Build Time: 75s / 30s cached (15 seconds slower on first build, afterwards only pages that have changed)
Requires 28MB model to be loaded on client
This might be too much of an increase to be worth it. Without this, we can still optimize searches manually using keywords, which should also improve SEO.
Closes https://github.com/mui/mui-public/issues/419
pnpm add https://pkg.pr.new/mui/base-ui/@base-ui-components/react@3193
pnpm add https://pkg.pr.new/mui/base-ui/@base-ui-components/utils@3193
commit: 0bf0197
![pkg-pr-new[bot] avatar](https://avatars.githubusercontent.com/in/882742?v=4 "Published by a pub.dev verified publisher"){kind=small}
Bundle size report
| Bundle | Parsed size | Gzip size |
|---|---|---|
| @base-ui-components/react | 0B(0.00%) | 0B(0.00%) |
Check out the code infra dashboard for more information about this PR.
Deploy Preview for base-ui ready!
| Name | Link |
|---|---|
| Latest commit | c540f8ee11fa7ba6b535803783d20371f4ccebc9 |
| Latest deploy log | https://app.netlify.com/projects/base-ui/deploys/691401d5a9f22b0008b500cc |
| Deploy Preview | https://deploy-preview-3193--base-ui.netlify.app |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify project configuration.
![netlify[bot] avatar](https://avatars.githubusercontent.com/in/13473?v=4 "Published by a pub.dev verified publisher"){kind=small}
Deploy Preview for base-ui ready!
| Name | Link |
|---|---|
| Latest commit | 0bf019733f05c900bfae22dd4bf6b50290241c5f |
| Latest deploy log | https://app.netlify.com/projects/base-ui/deploys/6928d95bfa1e440008bd8537 |
| Deploy Preview | https://deploy-preview-3193--base-ui.netlify.app |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify project configuration.
The search functionality works pretty good, have some initial comments on the UI:
The focus ring in the search field has the wrong color:
https://github.com/user-attachments/assets/271e4e0f-85b5-4e7d-9c35-704b368f3551
As you type, the results in the list (and even the group labels) shift around very visibly (more noticeable on mobile):
https://github.com/user-attachments/assets/3d0b5507-4b06-44bb-9b61-50e8fe1b33a9
The popup opening animation feels a bit slow? It's more noticeable on desktop, it might be better for it to just appear in the center like a command picker, example: https://deploy-preview-2817--base-ui.netlify.app/react/components/autocomplete#command-palette
The popup could maintain a minimum height when there are few results, otherwise blurred content under the backdrop could be distracting:
@mj12albert
The focus ring in the search field has the wrong color
Should be fixed now
the results in the list (and even the group labels) shift around very visibly
This was intentional, using view transitions, but it seems the consensus is that it is too distracting, so I removed it in favor of a more subtle fade. Do you think this looks ok now?
The popup opening animation feels a bit slow?
James suggested using a spring easing for the popup animation. Does it feel snappier with this applied?
The popup could maintain a minimum height when there are few results
What do you think about min-height: 80vh, or maybe more? Do you think we need this for desktop too?