Gooey Input

Inputs

Search button that expands into an input, with an SVG 'goo' filter melting the detached icon bubble into the field — adapted from Aceternity UI.

Instalação via CLI

$ npx kikitocn add gooey-input

Interno:

@/lib/utilsmotion

Exemplo de uso

Gooey InputExample.tsx

import { GooeyInput } from "@/components/ui/cn/gooey-input/GooeyInput";

export function GooeyInputExample() {
  return (
    <GooeyInput />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`placeholder`	`string`	`'Buscar…'`	Placeholder do input
`collapsedWidth`	`number`	`115`	Largura (px) recolhido
`expandedWidth`	`number`	`200`	Largura (px) expandido
`gooeyBlur`	`number`	`5`	Blur do filtro goo
`value`	`string`	—	Valor controlado
`onValueChange`	`(value: string) => void`	—	Callback ao digitar
`onOpenChange`	`(open: boolean) => void`	—	Callback ao expandir/recolher
`disabled`	`boolean`	`false`	Desabilita o controle

Carregando…