# Find and Run

> Search and command moments: a palette that runs a command, results that land with highlights and filters that reflow a list.

- Collection: Illustrations
- Tier: pro
- Docs: https://geturui.com/docs/find-and-run
- Install: `npx shadcn@latest add @geturui-pro/find-and-run`
- Dependencies: motion

## Variants

### Command

A query types itself, matching commands appear and the selection steps down and runs.

Install: `npx shadcn@latest add @geturui-pro/find-and-run-command`

```tsx
import { FindRunCommand } from "@/components/illustrations/find-and-run/command";

export function CommandIllustration() {
  return (
    <div className="rounded-xl border border-border bg-surface p-4">
      <FindRunCommand query="invite" className="w-full" />
    </div>
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| query | `string` | "deploy" | Query typed into the palette; a word or two. |
| speed | `number` | 1 | Speed multiplier for the loop (six seconds at 1). |
| title | `string` | — | Accessible description of the scene, used as the aria-label. |
| className | `string` | — | Classes for the SVG; it fills its container width and keeps its ratio. |

### Results

The field pulses while searching, ranked results slide in and matches light up.

Install: `npx shadcn@latest add @geturui-pro/find-and-run-results`

```tsx
import { FindRunResults } from "@/components/illustrations/find-and-run/results";

export function ResultsIllustration() {
  return (
    <div className="rounded-xl border border-border bg-surface p-4">
      <FindRunResults query="pricing tiers" className="w-full" />
    </div>
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| query | `string` | "refund policy" | Query shown in the search field. |
| speed | `number` | 1 | Speed multiplier for the loop (six seconds at 1). |
| title | `string` | — | Accessible description of the scene, used as the aria-label. |
| className | `string` | — | Classes for the SVG; it fills its container width and keeps its ratio. |

### Filters

Filter chips switch on their own while the result list reflows with springs.

Install: `npx shadcn@latest add @geturui-pro/find-and-run-filters`

```tsx
import { FindRunFilters } from "@/components/illustrations/find-and-run/filters";

export function FiltersIllustration() {
  return (
    <div className="rounded-xl border border-border bg-surface p-4">
      <FindRunFilters className="w-full" />
    </div>
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| speed | `number` | 1 | Speed multiplier for the loop (two seconds per filter at 1). |
| title | `string` | — | Accessible description of the scene, used as the aria-label. |
| className | `string` | — | Classes for the SVG; it fills its container width and keeps its ratio. |

## Accessibility

- Rendered as a single SVG with role="img" and an aria-label you can override with `title`; nothing inside is focusable.
- Under prefers-reduced-motion the scene renders one meaningful still frame: no loops, no timers.
- Colours come from the GetUrUI tokens only, so the scene follows light and dark themes automatically.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.