#What is Shadcn Phone?

Shadcn Phone is a free, open-source React component by Damian Ricobelli, designed to extend shadcn-ui with a customizable phone input field. It’s ideal for developers building forms for user registration, profiles, or contact pages in Next.js or React applications, particularly those using shadcn-ui.

Built with React, TypeScript, Tailwind CSS, shadcn-ui, and libphonenumber-js, it offers country selection with flag icons, accurate phone number validation, and seamless integration via shadcn CLI. Announced on X, it addresses the community’s need for a shadcn-ui-compatible phone input, providing a polished and accessible solution.

#Features ⚡️

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

• Phone Number Validation: Uses libphonenumber-js for reliable, country-specific validation.

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

• CLI Integration: Install via shadcn CLI for quick setup in shadcn-ui projects.

• Responsive Styling: Tailwind CSS ensures adaptability across devices.

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

• Utility Function: getPhoneData provides details like country code, national number, and validity.

#Pros and Cons

#Pros ✅

• Seamless shadcn-ui Fit: Matches shadcn-ui’s aesthetic and accessibility standards.

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

• Robust Validation: libphonenumber-js ensures accurate phone number validation.

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

• Community-Driven: Responds to user demand for phone input solutions.

#Cons ⚠️

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

• Setup Requirements: Needs shadcn-ui, Tailwind CSS, and libphonenumber-js installed.

• Client-Side Focus: Validation is client-side; server-side requires additional setup with libphonenumber-js.

• Niche Scope: Focused solely on phone input, not a broader component library.

#Included Components

• PhoneInput: Main component with country selection, flag display, and validation.

• CountrySelect: Dropdown for selecting countries with flags.

• FlagComponent: Renders country flags for visual feedback.

#Pricing 💸

Shadcn Phone 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.

• libphonenumber-js: Powers phone number validation and formatting.

• react-hook-form & Zod: Supports type-safe form integration.