f0rextasy

Country Select

Forms

About

A dropdown selector for choosing a country that shows its flag emoji and country code, for forms like billing addresses or phone number inputs.

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

Code

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

Usage.tsx

import { CountrySelect } from "@/components/ui/country-select";

export default function CountrySelectDemo() {
  return (
    <div className="flex w-full max-w-xs items-center justify-center bg-background p-8 text-foreground">
      <CountrySelect className="w-64" />
    </div>
  );
}

More by f0rextasy

View all
  • Newsletter Signup Card

    Newsletter Signup Card

    1
  • Time Input

    Time Input

    1
  • User Profile Dossier

    User Profile Dossier

  • Clinic Booking Block

    Clinic Booking Block

  • Page About

    Page About

  • Empty State Card

    Empty State Card

  • Emoji Picker

    Emoji Picker

  • Running Order Timeline

    Running Order Timeline

More in Forms

View all
  • Premium Auth

    Premium Auth

    504
  • Login 1

    Login 1

    52
  • Authentication Card

    Authentication Card

    47
  • Book A Demo 3

    Book A Demo 3

    84
  • Contact Card

    Contact Card

    1K
  • Book A Demo 1

    Book A Demo 1

    70
  • Book A Demo 4

    Book A Demo 4

    52
  • File Upload

    File Upload

    12