I'll create a phone input component with country selection that follows the shadcn/ui style. This component will allow users to select a country (showing the country code/DDI) and will automatically apply the correct mask to the phone number input.
This phone input component follows the shadcn/ui style 1 and provides:
libphonenumber-js for phone number formatting and validationcountry-flag-iconsYou'll need to install the required dependencies:
npm install libphonenumber-js country-flag-icons
# or
yarn add libphonenumber-js country-flag-icons
# or
pnpm add libphonenumber-js country-flag-iconsThe component is fully responsive and follows shadcn/ui's composable interface principles 2, making it easy to customize further if needed.