Viora LogoViora UI
Login

Input

An interactive input field with error shake animations and stroke check confirmation.

demo-motion-input-demo.tsx
Loading source code...

Installation

pnpm dlx viora-ui add motion-input
npx viora-ui add motion-input
yarn viora-ui add motion-input
bunx --bun viora-ui add motion-input

Usage

import { Input } from "viora-ui";
import { Mail } from "lucide-react";
import { useState } from "react";

export default function Demo() {
  const [value, setValue] = useState("");
  return (
    <Input
      label="Email"
      type="email"
      placeholder="you@example.com"
      value={value}
      onChange={setValue}
      leftIcon={<Mail />}
      success={value.includes("@")}
    />
  );
}

Built by Otis

Last updated: 9/13/2026