Halo Search

Animated search input with gradient border, loading effects, and clear action. Shows placeholder text with staggered reveal and loading line during async operations. Use for interactive search fields requiring visual feedback.

byjordan from Cult UI

Installation

terminal

pnpm dlx layro-cli add @nolly-studio/halo-search

npx layro-cli add @nolly-studio/halo-search

npx layro-cli add @nolly-studio/halo-search

bunx layro-cli add @nolly-studio/halo-search

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

/**
 * Animated search field with gradient border polish — tuned for both light and
 * dark themes using design tokens (`card`, `border`, `foreground`, etc.).
 */
import {
  forwardRef,
  useCallback,
  useEffect,
  useId,
  useMemo,
  useRef,
  useState,