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 | Default |
---|---|---|
value? | string | - |
defaultValue? | string | - |
onChange? | (value: string) => void | - |
label | string | - |
placeholder? | string | - |
disabled? | boolean | - |
className? | string | - |
inputClassName? | string | - |
labelClassName? | string | - |
icon? | React.ReactNode | - |