Controls & Inputs

Rotating Search Input

플레이스홀더가 순환되고 제출 시 텍스트가 사라지는 검색 입력입니다.

Preview

action control

Vanish Input

submit to collapse the search

Installation

bash

Copied

1pnpm dlx shadcn@latest add https://ryong.dev/r/placeholders-and-vanish-input.json

bash

Copied

1npx shadcn@latest add https://ryong.dev/r/placeholders-and-vanish-input.json

bash

Copied

1yarn dlx shadcn@latest add https://ryong.dev/r/placeholders-and-vanish-input.json

bash

Copied

1bunx shadcn@latest add https://ryong.dev/r/placeholders-and-vanish-input.json

Code

typescript

Copied

1import { PlaceholdersAndVanishInput } from "@/components/placeholders-and-vanish-input"23export default function Example() {4  return <PlaceholdersAndVanishInput placeholders={["Search docs", "Ask AI"]} />5}

Props

Prop	Type	Default	Description
className	string	-	Additional classes merged onto the component.
placeholders	string[]	-	Placeholder values to rotate.
variant	"light" \| "glass"	"light"	Visual surface style.
onSubmit	(value: string) => void	-	Submit handler.

Reference

Aceternity Placeholders And Vanish Input