Overview
MCP Server
Custom Shadcn Phone Input for React and Tailwind CSS. A phone number input component with country selection and validation.
We used the library to create this component.
import { PhoneInput } from "@/components/reui/phone-input"Browse 8 production-ready Shadcn Phone Input components for dashboards, forms, and product UI. These examples use Base UI primitives from @base-ui/react and stay fully compatible with Shadcn Create so radius, color, and typography match your configured theme.
Browse all 8 Shadcn Phone Input components for copy-ready layouts, dashboards, and forms built with Tailwind CSS in the ReUI library.
<PhoneInput
placeholder="Enter phone number"
defaultCountry="US"
value={value}
onChange={setValue}
/>Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
When to use
When not to use
Agent notes
aria-invalid to PhoneInput, which turns the country button and the field redplaceholder is the only text naming the field in every example; tie a label to it by id, or pass an aria labelvariant set to sm, default or lg, not size, which stays the native input attributeThird-party API docs
https://reui.io/docs/components/base/phone-input.mdget_component("phone-input")npx shadcn@latest add @reui/phone-inputThe main component for entering phone numbers with country selection.
This component also accepts all props from the react-phone-number-input library.
import { PhoneInput } from "@/components/reui/phone-input"
export function Pattern() {
return <PhoneInput placeholder="Enter phone number" />
}