Skip to content
Pinky UI

search

Search Results Morph

Stable-identity result transitions with quiet loading and empty states.

  • search
  • results
  • loading
  • filter

Live preview

  • Research interaction
  • Test keyboard path

Quick usage

usage
import { SearchResultsMorph } from "@pinky-ui/systems";

<SearchResultsMorph items={results} renderItem={renderResult} />

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Pointer and keyboard paths expose the same state change.
  • Status and focus remain meaningful when motion is disabled.

Performance

  • Uses local state and transforms; no per-frame React pointer loop.

Reduced motion

Resolves state changes without layout animation while preserving semantics.

When to use

  • Product workflows with a clear reversible or inspectable state.

When not to use

  • Decorative motion without a user task.

Skill

Purpose

Use for quiet add/remove/reorder transitions while query results change.

Use when

Stable result identity helps the user understand what changed in a filtered collection.

Avoid

Flashy stagger on every keystroke, unstable index keys, or pretending loading is complete.

Accessibility

Expose loading and result counts through a restrained live region and retain readable empty content.

Keyboard and touch

Result actions must be focusable list items or buttons independent of animated position.

Reduced motion and performance

Animate only changed rows and use stable IDs; do not run a pointer or scroll render loop.

Composition and anti-patterns

Pair with Morph Search or a normal input; use a real data-grid for analysis-heavy tables.

Open this skill on its own page