Shadcn Phone Input

Custom Shadcn Phone Input for React and Tailwind CSS. A phone number input component with country selection and validation.

Base UI Radix UI

API Reference

We used the library to create this component.

Installation


pnpm dlx shadcn@latest add @reui/phone-input

Usage

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

<PhoneInput

Shadcn Phone Input Free Components

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.

Number Field Rating

On This Page

Installation Usage For AI Agents Examples Size API Reference PhoneInput External Props

Prop	Type	Default	Description
`value`	`string`	-	The current phone number value in E.164 format.
`onChange`	`(value: string) => void`	-	Callback fired when the value changes.
`variant`	`"sm" \| "default" \| "lg"`	`"default"`	The vertical size of the input and country selector.
`popupClassName`	`string`	-	Additional CSS classes for the country selection dropdown.
`defaultCountry`	`Country`	-	The default country selected if no value is provided.
`placeholder`	`string`	-	Placeholder text for the phone number input.
`className`	`string`	-	Additional CSS classes for the root container.
`disabled`	`boolean`	`false`	Whether the input and country selector are disabled.

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

export function Pattern() {
  return (
    <PhoneInput
      variant="sm"
      placeholder="Enter phone number"
      defaultCountry="NL"
      value="+31612345678"
    />
  )
}

Application

Data Grid

Charts

AI & Agents

Solutions

Templates

eCommerce

Marketing