Wensity

Google-Style Search Bar

Pro

A Google AI Mode search bar with a rainbow that travels the rim, cycling typewriter prompts, and an inline Google wordmark.

searchglowgoogleaitypewriterinput
Google-Style Search Bar component preview

Overview

Google-Style Search Bar is a React and Tailwind CSS AI search input in the style of Google AI Mode, in Next.js or any React app, with no dependencies. A rainbow travels the rim along the pill's real path on canvas, so colors spread evenly, while typewriter prompts cycle in the empty field. It is a real form in a labelled search region, and voice, Lens, and AI Mode buttons fire callbacks. The rim pauses off screen and respects reduced motion. The wordmark is Google's, so hide it with hideWordmark in your own product.

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add google-search

Usage

Import GoogleSearch from @/components/wensity/google-search and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
"use client";
import { GoogleSearch } from "@/components/wensity/google-search";


export default function Example() {
  return (
    <GoogleSearch
      onSubmit={(query) => console.log(query)}
    />
  );
}

Props

PropTypeDefaultDescription
suggestionsreadonly string[]Four Google-style idle promptsCycling typewriter prompts shown while the field is idle.
valuestring-Controlled query.
defaultValuestring""Uncontrolled initial query.
onChange(value: string) => void-Fires on every text change.
onSubmit(value: string) => void-Fires when the form submits.
hideWordmarkbooleanfalseHide the inline Google wordmark.
wordmarkTone"mono" | "color""mono"Mono follows the theme, near-black on light and white on dark. Color uses the official letter fills.
aiModeLabelstring"AI Mode"Label inside the trailing pill.
onAiMode() => void-Fires when the AI Mode pill is pressed.
onVoice() => void-Fires when the microphone button is pressed.
onLens() => void-Fires when the Lens button is pressed.
glowbooleantrueDraw the travelling rainbow rim.
labelstring"Google Search"Accessible name for the search region.

Related components

  • Dynamic Island Toast component preview

    Dynamic Island Toast

    A pixel-faithful Apple Dynamic Island that morphs, splits, and breathes while it hosts live activities inside your app.

  • Infinite Marquee component preview

    Infinite Marquee

    A seamless, GPU-only logo strip that never stutters or snaps at the loop point.

  • Apple-Style Sticky Scroll component preview

    Apple-Style Sticky Scroll

    A pinned cinematic section that morphs in lock-step with scroll, staying perfectly in sync whichever way you travel.

  • Morphing Shape Background component preview

    Morphing Shape Background

    Lava lamp background for React heroes: soft gradient shapes that drift and melt.