Phone Input

Component 3

About

International phone input with a searchable country menu, flags, dial codes and a unified focus ring. shadcn theme tokens, classNames slots.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Phone Input to your project and fits it to your theme.

Code

How Phone Input is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

// Generated by scripts/build-21st.mjs from src/21st/demos/phone-input.tsx. Edit the source, not this file.

import { PhoneInput } from "@/components/ui/phone-input";

const settings = {
  defaultCountry: "US",
  placeholder: "(555) 000-0000",
  size: "default",
  showFlags: true,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };

  return (
    <div className="flex min-h-[420px] w-full items-start justify-center p-10">
      <PhoneInput
        // The country is read once on mount, so a new default remounts the field.
        key={s.defaultCountry}
        defaultCountry={s.defaultCountry}
        placeholder={s.placeholder}
        size={s.size as "sm" | "default" | "lg"}
        showFlags={s.showFlags}
        className="w-full max-w-xs"
      />
    </div>
  );
}