Input

Documentation and examples for the Input component.

Preview

Properties

Prop	Type	Default	Description
placeholder	string	"Input text here..."	Text displayed when empty.
icon	LucideIcon	Search	The visual icon displayed on the right.
onChange	() => void	-	Function called when text changes.
className	string	default classes	Tailwind overrides.

Usage

Follow these steps to add and use Input.

Create next app (skip if you already have setup a next app)

terminal

npx create-next-app@latest --yes

Install

terminal

npx modui-uikit@latest add input

Implement

typescript

import { Input } from '@/components/ui/input';
  import { Image } from 'lucide-react';
  
  export default function Example() {
    return (
      <Input 
          placeholder="This is a placeholder..."
          icon={Image}
      />
    )
  }