Animated Input

React text input with smooth focus animations, floating labels, and visual feedback. Modern form input component with Motion transitions for better UX.

Open in v0

Last updated: January 29, 2026

Animated Input Examples

Try focusing on the inputs to see the label animation!

Installation

pnpm dlx shadcn add @smoothui/animated-input
npx shadcn@latest add @smoothui/animated-input
yarn dlx shadcn add @smoothui/animated-input
bunx shadcn add @smoothui/animated-input

Features

  • Smooth focus animations
  • Floating label support
  • Visual feedback on interaction
  • Customizable animation timing
  • Built with Framer Motion
  • Accessible form input

Props

Accordion

Animated React accordion with smooth expand/collapse transitions. Accessible, keyboard-navigable FAQ component built on Radix UI with Motion animations.

Animated Progress Bar

A progress bar component with smooth animations and customizable styling.

On this page

Installation
Features
Props

Created by

Edu Calvo's avatar
Edu Calvo

Powered by

motion.dev
lucide.dev