<div className="flex w-full max-w-xs flex-col gap-6">
<MagicInput variant="primary" rainbow={false} placeholder="Email address" />
<MagicInput variant="secondary" rainbow={false} placeholder="Workspace name" />
</div>

<div className="flex w-full max-w-xs flex-col gap-6">
<MagicInput depth="focus" placeholder="Email address" />
<MagicInput depth="always" placeholder="Always raised" />
</div>

<div className="flex w-full max-w-xs flex-col gap-6">
<MagicInput size="sm" placeholder="Small" />
<MagicInput size="md" placeholder="Medium" />
<MagicInput size="lg" placeholder="Large" />
</div>

<div className="flex w-full max-w-xs flex-col gap-6">
<MagicInput placeholder="Search docs" onSubmit={(v) => alert(v)} />
<MagicInput size="lg" placeholder="Ask AI anything" onSubmit={(v) => alert(v)} />
</div>

<div className="flex w-full max-w-xs flex-col gap-6">
<MagicInput placeholder="Uploading…" onSubmit={() => {}} status="loading" />
<MagicInput placeholder="Exporting…" onSubmit={() => {}} status="loading" progress={60} />
<MagicInput placeholder="Invite sent" onSubmit={() => {}} status="success" />
<MagicInput placeholder="Try again" onSubmit={() => {}} status="error" />
</div>

Magic Input

tsx

import { MagicInput } from "@/components/godui/magic-input";export function MagicInputDemo() {return (  <div className="w-full max-w-xs">    <MagicInput placeholder="Email address" />  </div>);}

Documentation

Learn Playground

A 3D layered text input that lifts on focus with an optional rainbow edge animation.

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/magic-input.json"

Usage

tsx

import { MagicInput } from "@/components/godui/magic-input";

tsx

<MagicInput placeholder="Email address" />

By default the input is flat and lifts into the 3D effect only while focused. Set depth="always" to keep the raised look at rest, and rainbow={false} to disable the animated rainbow edge.

tsx

<MagicInput depth="always" rainbow={false} placeholder="Workspace name" />

Pass onSubmit to render an arrow button on the right. It fires with the current value on click or when Enter is pressed. Without onSubmit, set submitButton to render a type="submit" button for an enclosing form.

status and progress are fully controlled. While status="loading" the rainbow hides, the 3D depth locks in, and a progress bar runs along the bottom — determinate when you pass progress, otherwise an indeterminate segment bounces end to end. The arrow turns into a circular progress / spinner. success and error flash a green / red sweep with a check / X icon.

tsx

const [status, setStatus] = useState<MagicInputStatus>("idle");
const [progress, setProgress] = useState(0);

async function handleSubmit(value: string) {
  setStatus("loading");
  try {
    await upload(value, setProgress);
    setStatus("success");
  } catch {
    setStatus("error");
  }
  setTimeout(() => setStatus("idle"), 1600);
}

<MagicInput
  status={status}
  progress={status === "loading" ? progress : undefined}
  onSubmit={handleSubmit}
/>;

Props

Prop	Type	Default	Description
`variant`	`"primary" \| "secondary"`	`"primary"`	3D edge color scheme (visible when `rainbow={false}`)
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Input padding and text size
`depth`	`"focus" \| "always"`	`"focus"`	Show the 3D depth only on focus, or always
`rainbow`	`boolean`	`true`	Animate the edge and shadow with a rainbow gradient while focused
`submitButton`	`boolean`	`false`	Show the arrow submit button (`type="submit"`)
`onSubmit`	`(value: string) => void`	—	Fires with the value on click / Enter; also shows the button
`submitLabel`	`string`	`"Submit"`	Accessible label for the submit button
`status`	`"idle" \| "loading" \| "success" \| "error"`	`"idle"`	Submit lifecycle state
`progress`	`number`	—	0–100; makes `loading` determinate (omit for indeterminate)