)
}
export default function SearchRevealDemo() {
return
}
```
`SearchReveal` recreates the iOS pattern where a search field hides above a list. The container starts scrolled so the field is just out of view; scrolling up reveals it and fades it in. When scrolling stops partway, the container settles to fully shown or fully hidden, and it stays revealed while the field holds a query. Focusing the field scrolls it into view.
`SearchRevealField` is a controlled search input with a magnifying glass and a clear button. Use the pattern for lists such as notes, messages, or contacts where search should be available without taking up space.
## Installation
### CLI
```bash title="Terminal"
npx shadcn@latest add @esuiss/search-reveal
```
Works in any project with a `components.json`. See [Installation](https://ui.suiss.app/docs/installation#add-components) for the one-line registry setup. Or use the suiss/ui CLI:
```bash title="Terminal"
npx @esuiss/ui@latest add interactions search-reveal
```
### Manual
1. Install the dependencies and add the [`cn` helper](https://ui.suiss.app/docs/installation#the-cn-helper):
```bash title="Terminal"
npm install @phosphor-icons/react
```
2. Copy the source into `components/interactions/search-reveal.tsx`:
```tsx title="components/interactions/search-reveal.tsx"
"use client"
import { MagnifyingGlassIcon, XCircleIcon } from "@phosphor-icons/react"
import * as React from "react"
import { cn } from "@/lib/utils"
const SETTLE_DELAY = 140
function scrollBehavior(): ScrollBehavior {
return window.matchMedia("(prefers-reduced-motion: reduce)").matches
? "auto"
: "smooth"
}
function fieldOf(root: HTMLElement | null) {
return root?.querySelector("[data-slot=search-reveal-field]")
}
function SearchReveal({
className,
ref: forwardedRef,
...props
}: React.ComponentProps<"div">) {
const ref = React.useRef(null)
React.useLayoutEffect(() => {
const root = ref.current
const field = fieldOf(root)
if (!root || !field) return
const height = () => field.offsetHeight
const hasQuery = () =>
Boolean(field.querySelector("input")?.value)
let touching = false
let timer = 0
let frame = 0
const update = () => {
frame = 0
const reveal = Math.min(Math.max(1 - root.scrollTop / height(), 0), 1)
root.style.setProperty("--search-reveal", String(reveal))
}
const settle = () => {
const top = root.scrollTop
const size = height()
if (touching || top <= 0 || top >= size) return
root.scrollTo({
top: top < size / 2 || hasQuery() ? 0 : size,
behavior: scrollBehavior(),
})
}
const onScroll = () => {
if (!frame) frame = requestAnimationFrame(update)
window.clearTimeout(timer)
timer = window.setTimeout(settle, SETTLE_DELAY)
}
const onTouchStart = () => {
touching = true
}
const onTouchEnd = () => {
touching = false
window.clearTimeout(timer)
timer = window.setTimeout(settle, SETTLE_DELAY)
}
root.scrollTop = hasQuery() ? 0 : height()
update()
root.addEventListener("scroll", onScroll, { passive: true })
root.addEventListener("touchstart", onTouchStart, { passive: true })
root.addEventListener("touchend", onTouchEnd)
root.addEventListener("touchcancel", onTouchEnd)
return () => {
window.clearTimeout(timer)
cancelAnimationFrame(frame)
root.removeEventListener("scroll", onScroll)
root.removeEventListener("touchstart", onTouchStart)
root.removeEventListener("touchend", onTouchEnd)
root.removeEventListener("touchcancel", onTouchEnd)
}
}, [])
return (
)
}
function SearchRevealContent({
className,
...props
}: React.ComponentProps<"div">) {
return (
)
}
export { SearchReveal, SearchRevealContent, SearchRevealField }
```
3. Update the import paths to match your project.
## Usage
```tsx
import { SearchReveal, SearchRevealField, SearchRevealContent } from "@/components/interactions/search-reveal"
```
```tsx
```
- Place `SearchRevealField` first and `SearchRevealContent` after it inside `SearchReveal`, and give the container a bounded height.
- The field is controlled: pass `value` and update it in `onValueChange`. Filter the content from that value.
- `SearchRevealContent` fills at least the container's height, so the field can hide even when the list is short.
- `placeholder` defaults to `Search` and also labels the input.
## Examples
### Short list
A short list still hides the field above it and reveals it on focus.
**Example**
```tsx
import * as React from "react"
import {
SearchReveal,
SearchRevealContent,
SearchRevealField,
} from "@/components/interactions/search-reveal"
const allNotes = [
{ id: 1, title: "Groceries", preview: "Milk, eggs, bread, coffee" },
{ id: 2, title: "Trip ideas", preview: "Lisbon, Porto, the coast road" },
{ id: 3, title: "Book list", preview: "Three novels for the summer" },
{ id: 4, title: "Meeting notes", preview: "Ship the beta on Friday" },
{ id: 5, title: "Gift ideas", preview: "Headphones, a plant, a scarf" },
{ id: 6, title: "Recipes", preview: "Lemon pasta and a quick curry" },
{ id: 7, title: "Workout plan", preview: "Run on Monday, swim on Thursday" },
{
id: 8,
title: "Movies to watch",
preview: "Two documentaries and a classic",
},
{ id: 9, title: "Garden", preview: "Plant tomatoes after the frost" },
{ id: 10, title: "Packing list", preview: "Charger, passport, rain jacket" },
{ id: 11, title: "Podcast notes", preview: "Episode about city design" },
{ id: 12, title: "Budget", preview: "Rent, groceries, savings" },
]
function NotesExample({ count }: { count: number }) {
const [query, setQuery] = React.useState("")
const notes = allNotes
.slice(0, count)
.filter((note) =>
`${note.title} ${note.preview}`
.toLowerCase()
.includes(query.trim().toLowerCase())
)
return (