Input Components

Reusable input components.

Input

Enter text as input.

Name

Check Box

It is a moodified checkbox.

Checkbox

Select Option

It is a select component.

Select

Prerequisites

Ensure you have the following dependencies and utility functions installed before using the components.

Install Dependencies

npm install framer-motion clsx tailwind-merge lucide-react

Setup lib/utils.ts

Required for cn()

import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Note: We use tailwind-merge to handle overlapping Tailwind classes. This is critical for making your custom components extensible via className props.