Search Field

npx shadcn@latest add https://ui.saasflare.io/r/search-field.json

pnpm add @saasflare/ui

"use client"import { useState } from "react"import { SearchField } from "@saasflare/ui"/** A search input with built-in icon and clear button. */export function Demo() {    const [query, setQuery] = useState("")    return (        <div className="w-full max-w-sm">            <SearchField                placeholder="Search projects…"                value={query}                onChange={(e) => setQuery(e.target.value)}                onClear={() => setQuery("")}            />        </div>    )}

"use client"import { SearchField } from "@saasflare/ui"/** The loading state, showing a spinner in place of the search icon. */export function Demo() {    return (        <div className="w-full max-w-sm">            <SearchField placeholder="Searching members…" defaultValue="ada" loading />        </div>    )}