### Installation Steps
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/13-configuration.md
Commands to clone the repository, navigate into the directory, and install dependencies.
```bash
# Clone repository
git clone https://github.com/omeralpi/shadcn-phone-input.git
cd shadcn-phone-input
# Install dependencies
pnpm install
# Setup git hooks
pnpm prepare
```
--------------------------------
### Theme Provider Setup
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/13-configuration.md
Example of setting up the ThemeProvider for dark mode support using next-themes.
```typescript
import { ThemeProvider } from "@/components/theme-provider";
export default function RootLayout() {
return (
{children}
);
}
```
--------------------------------
### Development Server
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/13-configuration.md
Command to start the development server and the default local URL.
```bash
# Start development server
pnpm dev
# Open in browser
# http://localhost:3000
```
--------------------------------
### Add New Components
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/13-configuration.md
Use the shadcn CLI to add new components to the project. Components are typically installed in the `components/ui/` directory. The `components.json` file controls the installation path.
```bash
npx shadcn-ui@latest add [component-name]
```
--------------------------------
### Production Build Commands
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/13-configuration.md
Commands for building, type checking, linting, formatting, and starting the production server.
```bash
# Build
pnpm build
# Type checking
pnpm typecheck
# Linting
pnpm lint
# Format code
pnpm format
# Start production server
pnpm start
```
--------------------------------
### Node.js and Package Manager Versions
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/13-configuration.md
Required versions for Node.js and pnpm, along with installation commands.
```bash
# Required versions
Node: >=18.0.0
pnpm: >=9.0.0
# Install pnpm
npm install -g pnpm@9.14.2
# Verify installation
node --version # v18.0.0 or higher
pnpm --version # 9.14.2 or higher
```
--------------------------------
### TypeScript Path Aliases
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/13-configuration.md
Examples of how TypeScript path aliases are used for imports.
```typescript
import { cn } from "@/lib/utils"; // resolves to lib/utils.ts
import { Button } from "@/components/ui/button"; // resolves to components/ui/button.tsx
import { PhoneInput } from "@/components/ui/phone-input";
```
--------------------------------
### Tailwind CSS Customization Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/13-configuration.md
Example of how to extend Tailwind CSS theme with custom colors.
```typescript
import type { Config } from 'tailwindcss'
export default {
theme: {
extend: {
colors: {
// Custom colors here
},
},
},
} satisfies Config
```
--------------------------------
### Environment Variables
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/13-configuration.md
Example of creating a `.env.local` file for environment-specific settings. Next.js automatically loads this file during development.
```bash
# .env.local
# Add environment variables as needed
```
--------------------------------
### Vercel Deployment
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/13-configuration.md
Instructions for deploying the project on Vercel, including installing the Vercel CLI and running the deploy command. Analytics via `@vercel/analytics` is pre-installed.
```bash
npm i -g vercel
vercel
```
--------------------------------
### Toast Setup in Root Layout
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/10-toast-components.md
Example of how to set up the ToastProvider and Toaster component in the root layout of an application.
```typescript
// In your root layout/app component
import { Toaster } from "@/components/ui/toaster";
import { ToastProvider } from "@/components/ui/toast";
export default function RootLayout() {
return (
{/* Your app content */}
);
}
```
--------------------------------
### Tailwind CSS Custom Properties
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/13-configuration.md
Example of CSS custom properties defined for Tailwind CSS in globals.css.
```css
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 0 0% 3.6%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 100%;
/* ... more colors */
}
}
```
--------------------------------
### Update Toast Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/10-toast-components.md
Example demonstrating how to update an existing toast.
```typescript
const { id, update } = toast({ description: "Loading..." });
setTimeout(() => {
update({
id,
description: "Done!",
});
}, 2000);
```
--------------------------------
### Basic Toast Usage Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/10-toast-components.md
Example of how to use the basic toast functionality.
```typescript
import { Button } from "@/components/ui/button";
import { toast } from "@/components/ui/use-toast";
export function ToastDemo() {
return (
);
}
```
--------------------------------
### Dismiss Toast Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/10-toast-components.md
Example demonstrating how to dismiss a toast programmatically.
```typescript
const { dismiss } = toast({ description: "Message" });
// Dismiss after 3 seconds
setTimeout(dismiss, 3000);
```
--------------------------------
### PhoneInput Example (from source)
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/10-toast-components.md
Example demonstrating toast usage within a PhoneInput context.
```typescript
import { toast } from "@/components/ui/use-toast";
function onSubmit(data) {
toast({
title: "You submitted the following values:",
description: (
{JSON.stringify(data, null, 2)}
),
});
}
```
--------------------------------
### Adapter Pattern Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/14-architecture-overview.md
Example of FormControl using Slot to adapt components.
```typescript
```
--------------------------------
### Using useToast Hook Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/10-toast-components.md
Example demonstrating how to use the useToast hook in a component.
```typescript
import { useToast } from "@/components/ui/use-toast";
export function ToastComponent() {
const { toast } = useToast();
return (
);
}
```
--------------------------------
### Forward Ref Pattern Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/14-architecture-overview.md
Example of a component using React.forwardRef.
```typescript
const Component = React.forwardRef(
({ prop }, ref) => { ... }
);
```
--------------------------------
### Pub-Sub Pattern Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/14-architecture-overview.md
Example of the pub-sub mechanism for toast state management.
```typescript
const listeners: Array<(state: State) => void> = [];
function dispatch(action: Action) {
memoryState = reducer(memoryState, action);
listeners.forEach(listener => listener(memoryState));
}
```
--------------------------------
### Popover Usage Example with Custom Width
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/04-popover-component.md
An example showing how to customize the width of the PopoverContent.
```typescript
Custom width popover
```
--------------------------------
### package.json
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/13-configuration.md
The package.json file defines project metadata, dependencies, and scripts.
```json
{
"name": "shadcn-phone-input",
"version": "0.1.0",
"private": true,
"packageManager": "pnpm@9.14.2",
"engines": {
"node": ">=18.0.0",
"pnpm": ">=9"
}
}
```
--------------------------------
### Docker Deployment
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/13-configuration.md
Dockerfile for containerized deployment of the application.
```dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN npm install -g pnpm && pnpm install
COPY . .
RUN pnpm build
CMD ["pnpm", "start"]
```
--------------------------------
### Basic Popover Usage Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/04-popover-component.md
A simple example demonstrating how to use the Popover, PopoverTrigger, and PopoverContent components.
```typescript
import {
Popover,
PopoverTrigger,
PopoverContent,
} from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
export function PopoverDemo() {
return (
Popover Content
Your content here
);
}
```
--------------------------------
### Toast with Action Button Usage Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/10-toast-components.md
Example of triggering a toast with an action button.
```typescript
toast({
title: "File deleted",
description: "Your file has been deleted.",
action: (
Undo
),
});
```
--------------------------------
### Basic Alert Dialog Usage Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/07-dialog-components.md
An example demonstrating how to use the Dialog components to create a basic alert dialog.
```typescript
import {
Dialog,
DialogTrigger,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
DialogFooter,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
export function AlertDialogDemo() {
return (
);
}
```
--------------------------------
### Controlled Component Pattern Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/14-architecture-overview.md
Example of using the PhoneInput component as a controlled component.
```typescript
```
--------------------------------
### Toast with Title and Description Usage Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/10-toast-components.md
Example of triggering a toast with both a title and description.
```typescript
toast({
title: "Success!",
description: "Your changes have been saved.",
});
```
--------------------------------
### ESLint Configuration File
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/13-configuration.md
Details of the ESLint configuration file, including extended configurations.
```json
{
"extends": [
"eslint-config-next",
"eslint-config-prettier",
"eslint-plugin-tailwindcss"
]
}
```
--------------------------------
### How Tailwind Merge Works Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/11-utilities.md
Illustrates the conflict resolution mechanism of twMerge with an example.
```typescript
// Before twMerge
"px-2 px-4 py-1 py-2"
// After twMerge (only last value kept per property)
"py-2 px-4"
```
--------------------------------
### Higher-Order Component Pattern Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/14-architecture-overview.md
Example of FormField wrapping react-hook-form's Controller.
```typescript
const FormField = (props) => (
);
```
--------------------------------
### Usage Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/README.md
Demonstrates how to integrate the PhoneInput component within a React Hook Form setup, including validation with Zod and toast notifications.
```tsx
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { isValidPhoneNumber } from "react-phone-number-input";
import { z } from "zod";
import { Button } from "@/components/ui/button";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { PhoneInput } from "@/components/ui/phone-input";
import { toast } from "@/components/ui/use-toast";
const FormSchema = z.object({
phone:
z.string()
.refine(isValidPhoneNumber, { message: "Invalid phone number" }),
});
export default function Hero() {
const form = useForm>({
resolver: zodResolver(FormSchema),
defaultValues: {
phone: "",
},
});
function onSubmit(data: z.infer) {
toast({
title: "You submitted the following values:",
description:
(
{JSON.stringify(data, null, 2)}
),
});
}
return (
);
}
```
--------------------------------
### Button Example (from source)
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/11-utilities.md
Example of cn() usage within a Button component, merging variant, size, and custom classes.
```typescript
const Button = React.forwardRef(
({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button";
return (
);
},
);
```
--------------------------------
### Destructive Toast Usage Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/10-toast-components.md
Example of triggering a destructive toast.
```typescript
toast({
title: "Error",
description: "Something went wrong.",
variant: "destructive",
});
```
--------------------------------
### cmdk Version Constraint
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/13-configuration.md
Specifies the exact required version for the cmdk package.
```json
"cmdk": "^1.0.4"
```
--------------------------------
### Card Component Styling Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/11-utilities.md
A simple example of a Card component using cn() to merge base styles with user-provided className.
```typescript
function Card({ className, ...props }) {
return (
);
}
```
--------------------------------
### CVA (Class-Variance-Authority) Pattern Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/14-architecture-overview.md
Example of defining button variants using CVA.
```typescript
const buttonVariants = cva(baseClasses, {
variants: {
variant: { default: "...", destructive: "..." },
size: { default: "...", sm: "..." },
},
});
```
--------------------------------
### PhoneInput Example (from source)
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/11-utilities.md
Example of cn() usage within a PhoneInput component, merging specific border radius with user className.
```typescript
```
--------------------------------
### components.json
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/13-configuration.md
The main configuration file for shadcn UI, defining style, RSC, TSX, Tailwind CSS settings, and component aliases.
```json
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "tailwind.config.ts",
"css": "app/globals.css",
"baseColor": "zinc",
"cssVariables": true
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils"
}
}
```
--------------------------------
### Responsive Styling
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/11-utilities.md
Example of applying responsive styles based on screen sizes using `cn()`.
```typescript
function Grid({ columns = 3, className }) {
return (
);
}
```
--------------------------------
### Import PhoneInput
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/00-INDEX.md
Example of how to import the PhoneInput component.
```typescript
import { PhoneInput } from "@/components/ui/phone-input";
```
--------------------------------
### Important Version Constraints
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/13-configuration.md
Specifies a critical version constraint for react-phone-number-input.
```json
"react-phone-number-input": "^3.4.9"
```
--------------------------------
### PhoneInput Form (Complete Example)
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/08-form-components.md
A complete example demonstrating how to use the PhoneInput component within a form, including validation with Zod and react-hook-form.
```typescript
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { isValidPhoneNumber } from "react-phone-number-input";
import { z } from "zod";
import { Button } from "@/components/ui/button";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { PhoneInput } from "@/components/ui/phone-input";
import { toast } from "@/components/ui/use-toast";
const FormSchema = z.object({
phone: z
.string()
.refine(isValidPhoneNumber, { message: "Invalid phone number" }),
});
export function PhoneFormExample() {
const form = useForm>({
resolver: zodResolver(FormSchema),
defaultValues: {
phone: "",
},
});
function onSubmit(data: z.infer) {
toast({
title: "Phone number submitted",
description: data.phone,
});
}
return (
);
}
```
--------------------------------
### Multiple Component Styling Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/11-utilities.md
Shows how to apply different sets of classes to container and item elements based on conditions.
```typescript
const containerClass = cn(
"grid grid-cols-1",
responsive && "md:grid-cols-2 lg:grid-cols-3",
className
);
const itemClass = cn(
"p-4 border rounded-lg",
highlight && "border-blue-500 bg-blue-50"
);
```
--------------------------------
### With Label
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/03-input-component.md
Example of an Input component used with a Label component.
```typescript
import { Label } from "@/components/ui/label";
```
--------------------------------
### File Input
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/03-input-component.md
Example of a file input field with accepted file types.
```typescript
```
--------------------------------
### With Icons
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/02-button-component.md
Example of using icons within the Button component.
```typescript
import { ChevronRight } from "lucide-react";
```
--------------------------------
### Text Input Field Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/08-form-components.md
Example of rendering a text input field within a form using the FormField component.
```typescript
(
Username
Your username must be unique
)}
/>
```
--------------------------------
### Main Export: PhoneInput
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/00-INDEX.md
Example usage of the PhoneInput component.
```typescript
```
--------------------------------
### Array Input Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/11-utilities.md
Demonstrates merging an array of base classes with additional classes.
```typescript
const baseClasses = ["px-2", "py-1"];
const className = cn(baseClasses, "text-sm");
// Result: "px-2 py-1 text-sm"
```
--------------------------------
### Basic Text Input
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/03-input-component.md
Example of a basic text input field.
```typescript
import { Input } from "@/components/ui/input";
```
--------------------------------
### Object Notation Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/11-utilities.md
Illustrates using object notation for conditional class application.
```typescript
const className = cn({
"bg-blue-500": isActive,
"opacity-50": isDisabled,
"cursor-pointer": !isDisabled,
});
```
--------------------------------
### Basic Class Merging Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/11-utilities.md
Demonstrates basic merging of static CSS class names.
```typescript
import { cn } from "@/lib/utils";
const className = cn("px-2", "py-1");
// Result: "px-2 py-1"
```
--------------------------------
### Loading State Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/02-button-component.md
Demonstrates how to implement a loading state for the Button component using React's useState hook.
```typescript
const [isLoading, setIsLoading] = useState(false);
```
--------------------------------
### Basic Command Palette Usage
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/05-command-components.md
Example demonstrating the basic usage of the Command, CommandInput, CommandList, CommandEmpty, CommandGroup, and CommandItem components to create a command palette.
```typescript
import {
Command,
CommandInput,
CommandList,
CommandEmpty,
CommandGroup,
CommandItem,
} from "@/components/ui/command";
export function CommandPaletteDemo() {
return (
No commands found. alert("Create new")}>
Create new
alert("Delete")}>
Delete
);
}
```
--------------------------------
### Dismiss All Toasts
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/10-toast-components.md
Example of how to dismiss all currently displayed toasts using the useToast hook.
```typescript
const { dismiss } = useToast();
// Dismiss all
dismiss();
```
--------------------------------
### Custom Styling
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/03-input-component.md
Example of an Input component with custom CSS classes applied for styling.
```typescript
```
--------------------------------
### Union Types Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/12-types-reference.md
Multiple acceptable types.
```typescript
type Variant = "default" | "destructive" | "outline";
```
--------------------------------
### Extends/Intersection Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/12-types-reference.md
Combines multiple types.
```typescript
interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { }
type Combined = Type1 & Type2 & Type3;
```
--------------------------------
### Project Directory Hierarchy
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/14-architecture-overview.md
The directory structure of the shadcn-phone-input project, showing the organization of UI components, examples, and utility files.
```bash
components/
├── ui/ # Shadcn UI components
│ ├── phone-input.tsx # Main exported component
│ ├── button.tsx # Button component
│ ├── input.tsx # Text input component
│ ├── label.tsx # Form label
│ ├── popover.tsx # Popover (country selector)
│ ├── command.tsx # Command palette (country search)
│ ├── scroll-area.tsx # Scrollable area (country list)
│ ├── dialog.tsx # Modal dialog
│ ├── form.tsx # Form integration
│ ├── toast.tsx # Notification component
│ ├── use-toast.ts # Toast state hook
│ ├── accordion.tsx # Accordion (unused in phone input)
│ ├── dropdown-menu.tsx # Dropdown (unused)
│ ├── sheet.tsx # Side sheet (unused)
│ ├── table.tsx # Table (unused)
│ └── tabs.tsx # Tabs (unused)
├── examples/ # Usage examples
│ ├── form-in-dialog-example.tsx
│ ├── form-in-sheet-example.tsx
│ └── standalone-form-dialog-example.tsx
└── [other components for website]
lib/
└── utils.ts # cn() utility function
app/
├── layout.tsx # Root layout
├── globals.css # Global Tailwind CSS
├── robots.ts # SEO robots.txt
├── sitemap.ts # SEO sitemap
└── (home)/ # Home page route
└── page.tsx # Home page
```
--------------------------------
### Create a Form
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/00-INDEX.md
Example of importing necessary components and hooks for creating a form.
```typescript
import { Form, FormField, FormItem, FormControl, FormLabel, FormMessage } from "@/components/ui/form";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
```
--------------------------------
### Variant-Based Styling
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/11-utilities.md
Example of how to apply different styles based on a variant prop using `cn()`.
```typescript
function Badge({ variant = "default", className }) {
const baseClass = "px-2 py-1 rounded text-sm";
const variantClass = {
default: "bg-gray-200 text-gray-800",
success: "bg-green-200 text-green-800",
error: "bg-red-200 text-red-800",
}[variant];
return ;
}
```
--------------------------------
### Input with Icon
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/03-input-component.md
Example of how to integrate an icon within the input field for enhanced user experience.
```typescript
```
--------------------------------
### components.json for Tailwind CSS
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/13-configuration.md
Configuration for Tailwind CSS within components.json, specifying the config file, CSS file, base color, and CSS variables.
```json
{
"tailwind": {
"config": "tailwind.config.ts",
"css": "app/globals.css",
"baseColor": "zinc",
"cssVariables": true
}
}
```
--------------------------------
### Date Input
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/03-input-component.md
Example of a date input field with a default value.
```typescript
```
--------------------------------
### Number Input
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/03-input-component.md
Example of a number input field with min, max, and step attributes.
```typescript
```
--------------------------------
### Password Input
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/03-input-component.md
Example of a password input field with state management for showing/hiding the password.
```typescript
import { useState } from "react";
function PasswordInput() {
const [showPassword, setShowPassword] = useState(false);
return (
);
}
```
--------------------------------
### Optional Fields Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/12-types-reference.md
Fields marked as optional in interfaces/types with `?`.
```typescript
interface Example {
required: string;
optional?: string;
optionalNode?: React.ReactNode;
}
```
--------------------------------
### Country Selection (PhoneInput Usage)
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/05-command-components.md
Example showing how to use Command components for country selection within a phone input context, including search functionality.
```typescript
import { useState } from "react";
import {
Command,
CommandInput,
CommandList,
CommandEmpty,
CommandGroup,
CommandItem,
} from "@/components/ui/command";
function CountrySelector() {
const [search, setSearch] = useState("");
const countries = [
{ code: "US", name: "United States", calling: "+1" },
{ code: "CA", name: "Canada", calling: "+1" },
{ code: "GB", name: "United Kingdom", calling: "+44" },
];
return (
No country found.
{countries.map(({ code, name, calling }) => (
alert(name)}>
{name}
{calling}
))}
);
}
```
--------------------------------
### Component Props Merging Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/11-utilities.md
Illustrates merging default component styles with user-provided className.
```typescript
interface ButtonProps {
className?: string;
}
const Button = ({ className, ...props }: ButtonProps) => (
);
// Usage
// Result: "px-4 py-2 rounded text-lg"
```
--------------------------------
### Conditional Classes Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/11-utilities.md
Shows how to conditionally apply CSS classes based on boolean variables.
```typescript
const className = cn(
"px-2 py-1",
isActive && "bg-blue-500",
isDisabled && "opacity-50"
);
```
--------------------------------
### ZodInfer Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/12-types-reference.md
TypeScript utility to infer type from Zod schema.
```typescript
z.infer
```
--------------------------------
### CSS Variable System Usage
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/14-architecture-overview.md
Example of theme colors defined as CSS custom properties and used in Tailwind.
```css
:root {
--background: 0 0% 100%;
--foreground: 0 0% 3.6%;
--primary: 0 0% 9%;
/* ... */
}
```
```typescript
className="bg-background text-foreground border-primary"
```
--------------------------------
### Popover with Search
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/04-popover-component.md
A basic example of a Popover component integrated with an Input for search functionality.
```typescript
import { Input } from "@/components/ui/input";
Option 1
Option 2
```
--------------------------------
### Form Submit
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/02-button-component.md
Example of using a Button component within a form for submission.
```typescript
```
--------------------------------
### In Form Context
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/03-input-component.md
Example of an Input component used within a form context, utilizing react-hook-form.
```typescript
import { useForm } from "react-hook-form";
function MyForm() {
const { register } = useForm();
return (
);
}
```
--------------------------------
### Email Input with Validation
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/03-input-component.md
Example of an email input field with validation attributes.
```typescript
```
--------------------------------
### Controlled Component
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/03-input-component.md
Example of a controlled Input component using React state.
```typescript
import { useState } from "react";
function SearchInput() {
const [search, setSearch] = useState("");
return (
setSearch(e.currentTarget.value)}
placeholder="Search..."
/>
);
}
```
--------------------------------
### As Child Component
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/02-button-component.md
Example of using the `asChild` prop to render the button as a different element, like a link.
```typescript
```
--------------------------------
### Tailwind Conflict Resolution Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/11-utilities.md
Shows how twMerge resolves conflicting Tailwind utility classes.
```typescript
const className = cn(
"px-2 py-1", // Original padding
"px-4" // Overrides px-2
);
// Result: "py-1 px-4" (Tailwind utilities merged correctly)
```
--------------------------------
### Form Reset
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/08-form-components.md
Example of how to reset a form to its initial state using the reset function from react-hook-form.
```typescript
const form = useForm({ ... });
```
--------------------------------
### Form Integration
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/00-INDEX.md
Example of integrating PhoneInput within a form using react-hook-form.
```typescript
```
--------------------------------
### Multiple Labels
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/09-label-component.md
An example demonstrating the use of multiple Label and Input components within a form structure.
```typescript
```
--------------------------------
### Scrollable Command List
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/05-command-components.md
Example of a scrollable command list with CommandInput, CommandList, CommandEmpty, and CommandGroup.
```typescript
No results.
{items.map((item) => (
handleSelect(item)}>
{item.name}
))}
```
--------------------------------
### PhoneInput Form in Dialog
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/07-dialog-components.md
An example of integrating a phone input form within a dialog, with a title and description.
```typescript
```
--------------------------------
### Basic Label Usage
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/09-label-component.md
A simple example of how to use the Label component with an HTML form element.
```typescript
import { Label } from "@/components/ui/label";
```
--------------------------------
### Multiple Fields Form
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/08-form-components.md
Example of setting up a form with multiple fields using Zod for schema validation and shadcn's Form components.
```typescript
const schema = z.object({
email: z.string().email("Invalid email"),
phone: z.string().refine(isValidPhoneNumber),
message: z.string().min(10, "Message too short"),
});
```
--------------------------------
### Peer Disabled State Example (HTML)
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/09-label-component.md
Illustrates the HTML structure required for the `peer-disabled:` modifier to work, where the label and input are siblings.
```html
```
--------------------------------
### Complex Conditional Logic Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/11-utilities.md
Demonstrates merging multiple conditional classes using a combination of string literals, object notation, and boolean checks.
```typescript
const className = cn(
"base-styles",
{
"style-for-active": isActive,
"style-for-disabled": isDisabled,
"style-for-error": error,
},
customClasses,
isLoading && "opacity-50 pointer-events-none"
);
```
--------------------------------
### PhoneInput Integration
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/04-popover-component.md
Example of how the PhoneInput component integrates with Popover, including modal behavior and clearing search values on open.
```typescript
{
setIsOpen(open);
open && setSearchValue(""); // Clear search on open
}}
>
{/* Country search and selection */}
```
--------------------------------
### Integration with PhoneInput
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/08-form-components.md
Example of integrating the PhoneInput component within shadcn's Form components, passing field props and including description.
```typescript
(
PhoneInclude country code
)}
/>
The {...field} spread passes value, onChange, onBlur from react-hook-form Controller.
```
--------------------------------
### Basic Scrollable Area Usage Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/06-scrollarea-component.md
Example of how to use the ScrollArea component for a basic scrollable area.
```typescript
import { ScrollArea } from "@/components/ui/scroll-area";
export function ScrollAreaDemo() {
const items = Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`);
return (
{items.map((item) => (
{item}
))}
);
}
```
--------------------------------
### Main Entry Point: components/ui/ Direct Exports
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/14-architecture-overview.md
Direct exports from the main UI components directory, including PhoneInput and various shadcn/ui components.
```typescript
// PhoneInput
export { PhoneInput };
// Button
export { Button, buttonVariants };
// Input
export { Input };
// Label
export { Label };
// Form
export {
useFormField,
Form,
FormItem,
FormLabel,
FormControl,
FormDescription,
FormMessage,
FormField,
};
// Dialog
export {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogOverlay,
DialogPortal,
DialogTitle,
DialogTrigger,
};
// Command
export {
Command,
CommandDialog,
CommandInput,
CommandList,
CommandEmpty,
CommandGroup,
CommandItem,
CommandShortcut,
CommandSeparator,
};
// Popover
export { Popover, PopoverTrigger, PopoverContent };
// ScrollArea
export { ScrollArea, ScrollBar };
// Toast
export {
Toast,
ToastAction,
ToastClose,
ToastDescription,
ToastProvider,
ToastTitle,
ToastViewport,
type ToastActionElement,
type ToastProps,
};
// Toast Hook
export { useToast, toast };
```
--------------------------------
### Generic Types Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/12-types-reference.md
Types parameterized by other types.
```typescript
type FormFieldContextValue = {
name: FieldPath;
};
```
--------------------------------
### Disabled State
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/03-input-component.md
Example of a disabled Input component.
```typescript
```
--------------------------------
### Disabled State
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/02-button-component.md
Example of a disabled Button component.
```typescript
```
--------------------------------
### Omit Utility Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/12-types-reference.md
Removes specific keys from a type.
```typescript
type WithoutOnChange = Omit;
```
--------------------------------
### ElementRef Type
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/12-types-reference.md
Type to get the ref type of a component.
```typescript
React.ElementRef
```
--------------------------------
### ZodSchema Example
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/12-types-reference.md
Zod schema definition used with `zodResolver()` from @hookform/resolvers.
```typescript
z.object({ field: z.string() })
```
--------------------------------
### Button Sizes
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/02-button-component.md
Demonstrates the different size options for the Button component.
```typescript
```
--------------------------------
### Modal Command Dialog
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/05-command-components.md
Demonstrates how to implement a modal command dialog using CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, and CommandItem.
```typescript
import {
useState
} from "react";
import {
CommandDialog
} from "@/components/ui/command";
import {
Button
} from "@/components/ui/button";
function CommandDialogDemo() {
const [open, setOpen] = useState(false);
return (
<>
No commands found. setOpen(false)}>
New Project
setOpen(false)}>
Settings
);
}
```
--------------------------------
### Open a Dialog
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/00-INDEX.md
Shows the necessary imports for using the Dialog component.
```typescript
import {
Dialog,
DialogTrigger,
DialogContent,
DialogHeader,
DialogTitle
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
```
--------------------------------
### Import Pattern
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/11-utilities.md
How to import the `cn` utility function into your project.
```typescript
import { cn } from "@/lib/utils";
```
--------------------------------
### Style a Component
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/00-INDEX.md
Illustrates how to merge CSS class names using the cn utility function.
```typescript
import { cn } from "@/lib/utils";
const className = cn("base-class", isActive && "active-class");
```
--------------------------------
### Conditional Styling
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/11-utilities.md
Example of applying conditional styles based on props like 'required' and 'error'.
```typescript
function FormInput({ required, error, className }) {
return (
);
}
```
--------------------------------
### Command Item with Keyboard Shortcuts
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/05-command-components.md
Shows how to add keyboard shortcuts to CommandItem using CommandShortcut.
```typescript
import {
CommandItem,
CommandShortcut
} from "@/components/ui/command";
Save File⌘S
```
--------------------------------
### Documentation Structure
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/14-architecture-overview.md
The file structure for the documentation, indicating the purpose of each markdown file.
```markdown
output/
├── 01-phone-input.md # Main component
├── 02-button-component.md # UI components
├── 03-input-component.md
├── 04-popover-component.md
├── 05-command-components.md
├── 06-scrollarea-component.md
├── 07-dialog-components.md
├── 08-form-components.md
├── 09-label-component.md
├── 10-toast-components.md # Notification system
├── 11-utilities.md # Helper functions
├── 12-types-reference.md # Type definitions
├── 13-configuration.md # Setup and config
└── 14-architecture-overview.md # This file
```
--------------------------------
### Show a Toast
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/00-INDEX.md
Demonstrates how to display a toast notification using the toast function.
```typescript
import { toast } from "@/components/ui/use-toast";
tost({
title: "Success",
description: "Done!"
});
```
--------------------------------
### Styling Architecture Layers
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/14-architecture-overview.md
The order of CSS application in the styling architecture.
```text
1. Tailwind CSS (utility classes)
2. CVA (variant definitions)
3. cn() utility (class merging + Tailwind dedup)
4. Component props.className (user overrides)
```
--------------------------------
### toast Function Parameters
Source: https://github.com/omeralpi/shadcn-phone-input/blob/main/_autodocs/10-toast-components.md
Parameters for the toast function.
```typescript
type Toast = Omit & {
title?: React.ReactNode;
description?: React.ReactNode;
action?: ToastActionElement;
open?: boolean;
onOpenChange?: (open: boolean) => void;
}
```