#What is Shadcn Phone Input?

Shadcn Phone Input is a free, open-source React component by Omer Alpi, designed to enhance shadcn-ui with a customizable phone input field. It’s tailored for developers building forms in Next.js or React projects, such as registration pages or user profiles, where phone number validation is critical.

Built with React, TypeScript, Tailwind CSS, shadcn-ui, and react-phone-number-input, it offers country selection with flags, proper validation for any country, and seamless integration via shadcn CLI. The component addresses a community need for a shadcn-ui-compatible phone input, as highlighted in discussions.

#Features ⚡️

• Country Selection: Dropdown with flags and country codes for global compatibility.

• Phone Number Validation: Uses react-phone-number-input and libphonenumber-js for accurate validation.

• Accessible Design: Inherits shadcn-ui’s WAI-ARIA compliance for accessibility.

• Customizable Styling: Tailwind CSS allows easy style adjustments.

• Form Integration: Works with react-hook-form and Zod for type-safe forms.

• Responsive: Adapts to all screen sizes with Tailwind CSS.

#Pros and Cons

Pros ✅

• shadcn-ui Compatibility: Matches shadcn-ui’s design and accessibility standards.

• Free and Open-Source: MIT license allows unrestricted use and customization.

• Robust Validation: Leverages libphonenumber-js for reliable phone number checks.

• Easy Setup: CLI simplifies integration into shadcn-ui projects.

• Community-Driven: Addresses user needs (e.g., issue #903) with 740 GitHub stars.

Cons ⚠️

• React Dependency: Limited to React/shadcn-ui ecosystems.

• Setup Requirements: Needs shadcn-ui, Tailwind CSS, and dependencies like cmdk v1.0.0.

• Server-Side Limitation: Client-side validation (react-phone-number-input) may require libphonenumber-js for server-side use.

• Occasional Bugs: Past issues like popover scroll (fixed) and type mismatches reported.

• Dependency Complexity: Relies on react-phone-number-input, which some suggest replacing with libphonenumber-js directly.

#Included Components

• PhoneInput: A customizable input field with country selection, flags, and validation.

• CountrySelect: Dropdown for selecting countries with flag display.

• FlagComponent: Renders country flags for visual feedback.

#Pricing 💸

Shadcn Phone Input is completely free under the MIT license, with no premium tiers.

#Integrations 🧰

• React: Core framework for the component.

• shadcn-ui: Provides accessible, styled primitives.

• Tailwind CSS: Utility-first styling for responsive design.

• Next.js: Optimized for Next.js projects.

• TypeScript: Ensures type safety.

• react-phone-number-input: Powers phone input and validation.

• libphonenumber-js: Backend validation option for server-side actions.

• react-hook-form & Zod: Enables form integration and validation.