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
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 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 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" />
}