v1.2.6
Search
Search primitives expose SSR-safe markup that hydrates into a FlexSearch-powered client app. Use <Search /> for the default layout or mix the smaller components to control every region of the page.
<Search />Props
| Component | Prop | Type | Notes |
|---|---|---|---|
Search | layout | string | Optional layout override for the results region ('grid' or 'list'). |
SearchForm | id, className | string | Wire a custom label/aria relationship or add utility classes. |
SearchSummary | className | string | Finely control typography above the results. |
SearchResults | layout | string | Choose between 'grid' (masonry) and 'list' (stacked cards). |
SearchTabs | className | string | Style the per-type toggle list. |
SearchTotal | className | string | Display the live count anywhere on the page. |
SearchFormModal | mode | 'dialog' \/ 'inline' | Render the search drawer in dialog or inline form mode. |
Every component reads from the same client store and URL params, so you can scatter them around the layout without extra plumbing.
Examples
Custom layout
Compose your own layout inside content/search/_layout.mdx and let Canopy inject the search prop.
content/search/_layout.mdx
---title: Search--- <section className="space-y-6"> <header className="space-y-2"> <h1>Search</h1> <p>Browse works and documentation pages from the Northwestern collections.</p> </header> <SearchForm /> <SearchTabs /> <div className="flex items-center justify-between text-sm text-slate-500"> <SearchSummary /> <SearchTotal /> </div></section> <SearchResults layout="grid" />List layout
Flip to a list view when you need dense metadata instead of masonry cards.
<SearchResults layout="list" />Modal trigger
Use the modal helper when you need a search trigger outside the main page tree, such as the global header.
<SearchFormModal mode="dialog"> <button type="button" className="btn">Open search</button></SearchFormModal>