BasicAnimated Input

Animated Input

A text input with a floating label and smooth animation.

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

PropTypeDefault
value?
string
-
defaultValue?
string
-
onChange?
(value: string) => void
-
label
string
-
placeholder?
string
-
disabled?
boolean
-
className?
string
-
inputClassName?
string
-
labelClassName?
string
-
icon?
React.ReactNode
-
Basic Accordion
An expandable accordion component with smooth animations that's perfect for organizing content into collapsible sections.
Animated Progress Bar
A progress bar with a smooth fill animation and optional label.