Animated Input

A text input with a floating label and smooth animation.

Controlled

Uncontrolled

With Icon

Code

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.