Code
1
Install with shadcn Beta
Terminal
npx shadcn@latest add "https://smoothui.dev/r/animated-input.json"
Or install the demo
Terminal
npx shadcn@latest add "https://smoothui.dev/r/animated-input-demo.json"
How to use
Demo.tsx
"use client"
import { useState } from "react"
import { User } from "lucide-react"
import AnimatedInput from "@/components/smoothui/ui/AnimatedInput"
export default function AnimatedInputDemo() {
const [value, setValue] = useState("")
return (
<div className="max-w-xs space-y-6">
<AnimatedInput
label="Controlled"
value={value}
onChange={setValue}
placeholder="Type here..."
/>
<AnimatedInput label="Uncontrolled" defaultValue="Hello" />
<AnimatedInput
label="With Icon"
icon={<User size={20} strokeWidth={1.5} />}
placeholder="Username"
/>
</div>
)
}
Props
Prop | Type | Description |
---|---|---|
value? | string | Controlled value. |
defaultValue? | string | Uncontrolled initial value. |
onChange? | (value: string) => void | Callback when value changes. |
label | string | Input label. |
placeholder? | string | Input placeholder. |
disabled? | boolean | Disable the input. |
className? | string | Class name for the root. |
inputClassName? | string | Class name for the input. |
labelClassName? | string | Class name for the label. |
icon? | React.ReactNode | Optional icon. |