AI prompt bars with model pickers, floating-label inputs, auto-advancing OTP fields and multi-step signups — every input here is live, type in them.
AI Prompt Bar
The centerpiece of every AI product — glowing focus ring, model picker, attachment button and suggestion chips. Fully interactive.
| 1 | function PromptBar() { |
| 2 | const [value, setValue] = useState(""); |
| 3 | const [model, setModel] = useState("Claude 4.5"); |
| 4 | const models = ["Claude 4.5", "GPT-5", "Gemini Ultra"]; |
| 5 | |
| 6 | return ( |
| 7 | <div "color:#79c0ff">className="w-full max-w-2xl"> |
| 8 | {/* input shell — glows on focus-within */} |
| 9 | <div "color:#79c0ff">className="rounded-2xl border border-white/10 bg-white/[0.04] p-3 backdrop-blur transition-all focus-within:border-violet-400/60 focus-within:shadow-[0_0_40px_rgba(139,92,246,0.25)]"> |
| 10 | <textarea |
| 11 | rows={2} |
| 12 | "color:#79c0ff">value={value} |
| 13 | "color:#79c0ff">onChange={(e) => setValue(e.target.value)} |
| 14 | "color:#79c0ff">placeholder="Ask AI to build, write or explain anything…" |
| 15 | "color:#79c0ff">className="w-full resize-none bg-transparent px-2 pt-1 text-sm text-white placeholder-white/30 outline-none" |
| 16 | /> |
| 17 | <div "color:#79c0ff">className="flex items-center justify-between pt-2"> |
| 18 | <div "color:#79c0ff">className="flex items-center gap-1.5"> |
| 19 | <button "color:#79c0ff">className="flex h-8 w-8 items-center justify-center rounded-lg text-white/40 transition hover:bg-white/8 hover:text-white" "color:#79c0ff">aria-label="Attach"> |
| 20 | <PaperclipIcon "color:#79c0ff">className="h-4 w-4" /> |
| 21 | </button> |
| 22 | <button "color:#79c0ff">className="flex h-8 w-8 items-center justify-center rounded-lg text-white/40 transition hover:bg-white/8 hover:text-white" "color:#79c0ff">aria-label="Voice"> |
| 23 | <MicIcon "color:#79c0ff">className="h-4 w-4" /> |
| 24 | </button> |
| 25 | {/* model picker */} |
| 26 | <select |
| 27 | "color:#79c0ff">value={model} |
| 28 | "color:#79c0ff">onChange={(e) => setModel(e.target.value)} |
| 29 | "color:#79c0ff">className="rounded-lg border border-white/10 bg-white/[0.06] px-2 py-1.5 text-[11px] font-semibold text-white/70 outline-none" |
| 30 | > |
| 31 | {models.map((m) => <option "color:#79c0ff">key={m}>{m}</option>)} |
| 32 | </select> |
| 33 | </div> |
| 34 | <button |
| 35 | "color:#79c0ff">disabled={!value.trim()} |
| 36 | "color:#79c0ff">className="flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-r from-violet-600 to-indigo-600 text-white shadow-lg shadow-violet-500/30 transition-all hover:scale-105 active:scale-95 disabled:opacity-30 disabled:hover:scale-100" |
| 37 | "color:#79c0ff">aria-label="Send" |
| 38 | > |
| 39 | <ArrowUpIcon "color:#79c0ff">className="h-4 w-4" /> |
| 40 | </button> |
| 41 | </div> |
| 42 | </div> |
| 43 | |
| 44 | {/* suggestion chips */} |
| 45 | <div "color:#79c0ff">className="mt-3 flex flex-wrap gap-2"> |
| 46 | {["✨ Improve writing", "🧩 Generate component", "🐛 Fix my bug", "📝 Summarize"].map((s) => ( |
| 47 | <button "color:#79c0ff">key={s} "color:#79c0ff">onClick={() => setValue(s.slice(2).trim())} |
| 48 | "color:#79c0ff">className="rounded-full border border-white/10 bg-white/[0.03] px-3 py-1.5 text-xs text-white/55 transition hover:border-violet-400/40 hover:text-white"> |
| 49 | {s} |
| 50 | </button> |
| 51 | ))} |
| 52 | </div> |
| 53 | </div> |
| 54 | ); |
| 55 | } |
Modern Inputs
✓ Username is available
Floating labels, leading icons, live password reveal and validation states with helper text.
| 1 | {/* floating label */} |
| 2 | <div "color:#79c0ff">className="relative"> |
| 3 | <input |
| 4 | "color:#79c0ff">id="name" |
| 5 | "color:#79c0ff">placeholder=" " |
| 6 | "color:#79c0ff">className="peer w-full rounded-xl border border-white/12 bg-white/[0.04] px-4 pb-2.5 pt-5 text-sm text-white outline-none transition focus:border-violet-400/60 focus:shadow-[0_0_24px_rgba(139,92,246,0.15)]" |
| 7 | /> |
| 8 | <label |
| 9 | "color:#79c0ff">htmlFor="name" |
| 10 | "color:#79c0ff">className="pointer-events-none absolute left-4 top-1.5 text-[10px] font-semibold uppercase tracking-wider text-violet-300 transition-all peer-placeholder-shown:top-3.5 peer-placeholder-shown:text-sm peer-placeholder-shown:font-normal peer-placeholder-shown:normal-case peer-placeholder-shown:tracking-normal peer-placeholder-shown:text-white/30 peer-focus:top-1.5 peer-focus:text-[10px] peer-focus:font-semibold peer-focus:uppercase peer-focus:tracking-wider peer-focus:text-violet-300" |
| 11 | > |
| 12 | Full name |
| 13 | </label> |
| 14 | </div> |
| 15 | |
| 16 | {/* icon input */} |
| 17 | <div "color:#79c0ff">className="relative"> |
| 18 | <MailIcon "color:#79c0ff">className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-white/30" /> |
| 19 | <input "color:#79c0ff">placeholder="you@company.com" |
| 20 | "color:#79c0ff">className="w-full rounded-xl border border-white/12 bg-white/[0.04] py-3 pl-10 pr-4 text-sm text-white placeholder-white/30 outline-none transition focus:border-violet-400/60" /> |
| 21 | </div> |
| 22 | |
| 23 | {/* validation */} |
| 24 | <input "color:#79c0ff">className="w-full rounded-xl border border-emerald-400/50 bg-emerald-500/[0.06] px-4 py-3 text-sm text-white outline-none" "color:#79c0ff">defaultValue="ayush_builds" /> |
| 25 | <p "color:#79c0ff">className="mt-1.5 text-xs text-emerald-400">✓ Username is available</p> |
OTP Verification
Enter verification code
We sent a 6-digit code to +91 ••••• 43210
Didn't receive it?
Six-digit code input with auto-advance, backspace navigation and a filled state — type a code.
| 1 | function OtpInput() { |
| 2 | const [digits, setDigits] = useState(Array(6).fill("")); |
| 3 | const refs = useRef<(HTMLInputElement | null)[]>([]); |
| 4 | |
| 5 | const handle = (i: number, v: string) => { |
| 6 | if (!/^[0-9]?$/.test(v)) return; |
| 7 | const next = [...digits]; |
| 8 | next[i] = v; |
| 9 | setDigits(next); |
| 10 | if (v && i < 5) refs.current[i + 1]?.focus(); |
| 11 | }; |
| 12 | |
| 13 | return ( |
| 14 | <div "color:#79c0ff">className="flex gap-2.5"> |
| 15 | {digits.map((d, i) => ( |
| 16 | <input |
| 17 | "color:#79c0ff">key={i} |
| 18 | "color:#79c0ff">ref={(el) => { refs.current[i] = el; }} |
| 19 | "color:#79c0ff">value={d} |
| 20 | maxLength={1} |
| 21 | inputMode="numeric" |
| 22 | "color:#79c0ff">onChange={(e) => handle(i, e.target.value)} |
| 23 | onKeyDown={(e) => { |
| 24 | if (e.key === "Backspace" && !digits[i] && i > 0) refs.current[i - 1]?.focus(); |
| 25 | }} |
| 26 | "color:#79c0ff">className={ |
| 27 | "h-13 w-11 rounded-xl border bg-white/[0.04] text-center text-lg font-bold text-white outline-none transition-all " + |
| 28 | (d ? "border-violet-400/70 shadow-[0_0_16px_rgba(139,92,246,0.25)]" |
| 29 | : "border-white/12 focus:border-violet-400/60") |
| 30 | } |
| 31 | /> |
| 32 | ))} |
| 33 | </div> |
| 34 | ); |
| 35 | } |
Selection Controls
iOS-style switches, gradient checkboxes and card radios — every control here is clickable.
| 1 | function Switch({ label }: { label: string }) { |
| 2 | const [on, setOn] = useState(true); |
| 3 | return ( |
| 4 | <button |
| 5 | "color:#79c0ff">onClick={() => setOn(!on)} |
| 6 | "color:#79c0ff">className="flex w-full items-center justify-between rounded-xl border border-white/10 bg-white/[0.03] px-4 py-3" |
| 7 | > |
| 8 | <span "color:#79c0ff">className="text-sm text-white/75">{label}</span> |
| 9 | <span "color:#79c0ff">className={ |
| 10 | "flex h-6 w-11 items-center rounded-full p-0.5 transition-all duration-300 " + |
| 11 | (on ? "justify-end bg-gradient-to-r from-violet-600 to-indigo-600" : "justify-start bg-white/12") |
| 12 | }> |
| 13 | <span "color:#79c0ff">className="h-5 w-5 rounded-full bg-white shadow" /> |
| 14 | </span> |
| 15 | </button> |
| 16 | ); |
| 17 | } |
| 18 | |
| 19 | {/* card radio */} |
| 20 | <label "color:#79c0ff">className="flex cursor-pointer items-center gap-3 rounded-xl border border-violet-400/60 bg-violet-500/10 px-4 py-3"> |
| 21 | <input "color:#79c0ff">type="radio" "color:#79c0ff">name="plan" defaultChecked "color:#79c0ff">className="h-4 w-4 accent-violet-500" /> |
| 22 | <div> |
| 23 | <p "color:#79c0ff">className="text-sm font-semibold text-white">Pro — $15/mo</p> |
| 24 | <p "color:#79c0ff">className="text-xs text-white/40">Unlimited projects & AI credits</p> |
| 25 | </div> |
| 26 | </label> |
Login Card
Sign in to continue to UIDrops
No account?
Glass auth card with social buttons, divider and glowing focus states — the full sign-in experience.
| 1 | <div "color:#79c0ff">className="w-full max-w-sm rounded-3xl border border-white/10 bg-white/[0.04] p-8 backdrop-blur-xl shadow-2xl"> |
| 2 | <div "color:#79c0ff">className="mx-auto flex h-11 w-11 items-center justify-center rounded-2xl bg-gradient-to-br from-violet-600 to-indigo-600 shadow-lg shadow-violet-500/30"> |
| 3 | <BoltIcon "color:#79c0ff">className="h-5 w-5 text-white" /> |
| 4 | </div> |
| 5 | <h2 "color:#79c0ff">className="mt-5 text-center text-xl font-extrabold text-white">Welcome back</h2> |
| 6 | <p "color:#79c0ff">className="mt-1 text-center text-sm text-white/40">Sign in to continue to UIDrops</p> |
| 7 | |
| 8 | <button "color:#79c0ff">className="mt-6 flex w-full items-center justify-center gap-2.5 rounded-xl bg-white py-2.5 text-sm font-semibold text-slate-800 transition hover:bg-slate-100"> |
| 9 | <GoogleIcon "color:#79c0ff">className="h-4 w-4" /> Continue with Google |
| 10 | </button> |
| 11 | |
| 12 | <div "color:#79c0ff">className="my-5 flex items-center gap-3"> |
| 13 | <span "color:#79c0ff">className="h-px flex-1 bg-white/10" /> |
| 14 | <span "color:#79c0ff">className="text-[10px] font-semibold uppercase tracking-wider text-white/30">or</span> |
| 15 | <span "color:#79c0ff">className="h-px flex-1 bg-white/10" /> |
| 16 | </div> |
| 17 | |
| 18 | <div "color:#79c0ff">className="space-y-3"> |
| 19 | <input "color:#79c0ff">placeholder="you@company.com" |
| 20 | "color:#79c0ff">className="w-full rounded-xl border border-white/12 bg-white/[0.04] px-4 py-3 text-sm text-white placeholder-white/30 outline-none transition focus:border-violet-400/60" /> |
| 21 | <input "color:#79c0ff">type="password" "color:#79c0ff">placeholder="Password" |
| 22 | "color:#79c0ff">className="w-full rounded-xl border border-white/12 bg-white/[0.04] px-4 py-3 text-sm text-white placeholder-white/30 outline-none transition focus:border-violet-400/60" /> |
| 23 | </div> |
| 24 | |
| 25 | <div "color:#79c0ff">className="mt-3 flex items-center justify-between text-xs"> |
| 26 | <label "color:#79c0ff">className="flex items-center gap-2 text-white/45"> |
| 27 | <input "color:#79c0ff">type="checkbox" "color:#79c0ff">className="h-3.5 w-3.5 rounded accent-violet-500" /> Remember me |
| 28 | </label> |
| 29 | <a "color:#79c0ff">className="font-semibold text-violet-300 hover:text-violet-200" "color:#79c0ff">href="#">Forgot password?</a> |
| 30 | </div> |
| 31 | |
| 32 | <button "color:#79c0ff">className="mt-6 w-full rounded-xl bg-gradient-to-r from-violet-600 to-indigo-600 py-3 text-sm font-bold text-white shadow-lg shadow-violet-500/30 transition hover:shadow-violet-500/50 active:scale-[0.99]"> |
| 33 | Sign in |
| 34 | </button> |
| 35 | |
| 36 | <p "color:#79c0ff">className="mt-5 text-center text-xs text-white/35"> |
| 37 | No account? <a "color:#79c0ff">className="font-semibold text-violet-300" "color:#79c0ff">href="#">Create one free</a> |
| 38 | </p> |
| 39 | </div> |
Multi-Step Signup
Create your account
A three-step wizard with progress bar and animated step transitions — click Continue to walk through it.
| 1 | function SignupWizard() { |
| 2 | const [step, setStep] = useState(0); |
| 3 | const steps = ["Account", "Workspace", "Finish"]; |
| 4 | |
| 5 | return ( |
| 6 | <div "color:#79c0ff">className="w-full max-w-sm rounded-3xl border border-white/10 bg-white/[0.04] p-7"> |
| 7 | {/* progress */} |
| 8 | <div "color:#79c0ff">className="flex items-center gap-2"> |
| 9 | {steps.map((s, i) => ( |
| 10 | <div "color:#79c0ff">key={s} "color:#79c0ff">className="flex flex-1 flex-col gap-1.5"> |
| 11 | <div "color:#79c0ff">className={"h-1 rounded-full transition-all duration-500 " + |
| 12 | (i <= step ? "bg-gradient-to-r from-violet-500 to-indigo-500" : "bg-white/10")} /> |
| 13 | <span "color:#79c0ff">className={"text-[10px] font-semibold " + (i <= step ? "text-violet-300" : "text-white/30")}>{s}</span> |
| 14 | </div> |
| 15 | ))} |
| 16 | </div> |
| 17 | |
| 18 | {/* step content (swap by index) … */} |
| 19 | |
| 20 | <div "color:#79c0ff">className="mt-6 flex gap-3"> |
| 21 | {step > 0 && ( |
| 22 | <button "color:#79c0ff">onClick={() => setStep(step - 1)} |
| 23 | "color:#79c0ff">className="flex-1 rounded-xl border border-white/12 py-2.5 text-sm font-semibold text-white/70 hover:bg-white/5"> |
| 24 | Back |
| 25 | </button> |
| 26 | )} |
| 27 | <button "color:#79c0ff">onClick={() => setStep(Math.min(step + 1, 2))} |
| 28 | "color:#79c0ff">className="flex-1 rounded-xl bg-gradient-to-r from-violet-600 to-indigo-600 py-2.5 text-sm font-bold text-white shadow-lg shadow-violet-500/30"> |
| 29 | {step === 2 ? "Launch 🚀" : "Continue"} |
| 30 | </button> |
| 31 | </div> |
| 32 | </div> |
| 33 | ); |
| 34 | } |
Search & Command Inputs
A ⌘K search field with kbd hint, an expanding search pill and a filter input with clear button.
| 1 | {/* command search */} |
| 2 | <div "color:#79c0ff">className="relative w-full max-w-md"> |
| 3 | <SearchIcon "color:#79c0ff">className="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-white/30" /> |
| 4 | <input |
| 5 | "color:#79c0ff">placeholder="Search docs, components, examples…" |
| 6 | "color:#79c0ff">className="w-full rounded-2xl border border-white/10 bg-white/[0.05] py-3.5 pl-11 pr-20 text-sm text-white placeholder-white/30 outline-none backdrop-blur transition focus:border-violet-400/50 focus:shadow-[0_0_32px_rgba(139,92,246,0.2)]" |
| 7 | /> |
| 8 | <div "color:#79c0ff">className="absolute right-3 top-1/2 flex -translate-y-1/2 gap-1"> |
| 9 | <kbd "color:#79c0ff">className="rounded-md border border-white/12 bg-white/[0.06] px-1.5 py-0.5 text-[10px] font-bold text-white/40">⌘</kbd> |
| 10 | <kbd "color:#79c0ff">className="rounded-md border border-white/12 bg-white/[0.06] px-1.5 py-0.5 text-[10px] font-bold text-white/40">K</kbd> |
| 11 | </div> |
| 12 | </div> |