Skip to content
DocsSupportPricing
Roadmap (has updates coming soon)XFigma3.5K
Sign inGet ProGet All-Access
Overview
  • Introduction
  • Get Started
  • License Setup
  • Styling
  • Registry
  • MCP Server
  • Embed
  • Agent Skills
  • llms.txt
  • RTL
  • Changelog
MCP Server
  • Claude
  • CodexCodexCodex
  • Cursor
  • Grok
  • Conductor
  • v0
  • Lovable
  • Replit
  • Bolt
  • OpenCode
  • VS Code
  • GitHub Copilot
  • Kilo Code
  • Zed
  • Antigravity
  • WSWindsurf
  • CLCline
  • Gemini CLI
  • AMAmp
  • JBJetBrains Junie
Components
  • Alert
  • Autocomplete
  • Badge
  • Cascader
  • Code Block
  • Data Grid
  • Date Selector
  • Event Calendar
  • File Upload
  • Filters
  • Frame
  • Gantt
  • Icon Stack
  • Icon Tile
  • Kanban
  • Number Field
  • Phone Input
  • Rating
  • Scrollspy
  • Sortable
  • Stepper
  • Timeline
  • Tree

Application

  • App ShellAdded 10 new app shell blocks
  • Auth
  • Card
  • Chart
  • Dashboard
  • Dialog
  • Empty State
  • Event Calendar
  • Flow
  • Form
  • Gantt
  • Kanban Board
  • List
  • Navbar
  • Onboarding
  • Profile
  • Schedule
  • Settings
  • Sheet
  • Stats
  • Timeline
  • Wizard

Solutions

  • Agents
  • AI Ops
  • Analytics
  • Billing
  • Bookings
  • CRM
  • Files
  • Inventory
  • Users

AI & Agents

  • AI Chat
  • Agent Activity

Templates

  • E-commerce
  • SaaS
  • Dashboard
  • Landing
  • All templates

eCommerce

  • Category Card
  • Checkout
  • Comparison
  • Coupon
  • Filter Sidebar
  • Product Card
  • Product Detail
  • Product Grid
  • Receipt
  • Review
  • Shopping Cart
  • Wishlist
  • Shop Hero

Data Grid

  • BaseAdded a rate card Data Grid block with a price breakdown dialog
  • Columns
  • Drag & Drop
  • Editing
  • Expansion
  • Filtering
  • Grouping
  • Virtualization

Marketing

  • Blog
  • CompareNew Compare category with 3 versus section blocks
  • Contact
  • CTAAdded 11 new CTA blocks
  • FAQ
  • Hero
  • How It WorksNew How It Works category with 5 numbered step blocks
  • PricingNew Pricing category with a 4-tier pricing table block

Resources

  • Components
  • Blocks
  • Icons
  • MCP for Agents
  • Docs
  • Support
  • Pricing
  • Roadmap(has updates coming soon)
  • AffiliateSoon

Legal

  • Privacy Policy
  • Terms & Conditions
  • License
  • Refunds
  • Cookies

© 2026 ReUI. All rights reserved.

3.5K

Shadcn Phone Input

PreviousNext

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

Base UIRadix 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"

Shadcn Phone Input Free Components

Browse 8 production-ready Shadcn Phone Input components for dashboards, forms, and product UI. These examples follow the Radix UI implementation with accessible primitives from the Radix stack 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 FieldRating

On This Page

InstallationUsageExamplesSizeAPI ReferencePhoneInputExternal Props
<PhoneInput placeholder="Enter phone number" defaultCountry="US" value={value} onChange={setValue} />

Examples

Size

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

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

API Reference

PhoneInput

The main component for entering phone numbers with country selection.

PropTypeDefaultDescription
valuestring-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.
popupClassNamestring-Additional CSS classes for the country selection dropdown.
defaultCountryCountry-The default country selected if no value is provided.
placeholderstring-Placeholder text for the phone number input.
classNamestring-Additional CSS classes for the root container.
disabledbooleanfalseWhether the input and country selector are disabled.

External Props

This component also accepts all props from the react-phone-number-input library.

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

export function Pattern() {
  return <PhoneInput placeholder="Enter phone number" />
}