Components
Loading preview...
This component is a modern floating-label input designed for clean, user-friendly forms. It features an icon on the left, which can represent the type of input (like email, username, or password), and a label that smoothly floats above the field when focused or filled, eliminating the need for a traditional placeholder. The input automatically adjusts padding so that typed text never overlaps the icon or label.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/floating-inputimport FloatingInput from "@/components/ui/floating-input";
export default function DemoOne() {
return (
<>
<FloatingInput />
{/*<FloatingInput label="Password" type="password" icon={null} /> // password without icon*/}
</>
);
}