Input

A neumorphism-styled input field with a search icon and soft shadow styling.

Preview

Installation

bash

npx shadcn@latest add @zerodrive/input

Then import the component:

tsx

import { Input } from "@/components/ui/input"

Color Palettes

Apply different color palettes to customize the focus ring color.

tsx

<Input palette="lime" placeholder="Lime palette" />
<Input palette="pink" placeholder="Pink palette" />
<Input palette="violet" placeholder="Violet palette" />
<Input palette="purple" placeholder="Purple palette" />
<Input palette="blue-gray" placeholder="Blue Gray palette" />
<Input palette="gray" placeholder="Gray palette" />

Custom Icons

Pass a custom icon or null to hide the icon entirely.

tsx

// With custom icon
<Input
  icon={<MailIcon className="size-[30px] shrink-0 text-neu-text-400" />}
  placeholder="Enter email..."
/>

// Without icon
<Input icon={null} placeholder="No icon" />

Props

Prop	Type	Default	Description
`palette`	`"lime" \| "pink" \| "violet" \| "purple" \| "blue-gray" \| "gray"`	`"blue-gray"`	The color palette for focus ring states.
`icon`	`React.ReactNode`	`<SearchIcon />`	Custom icon to display. Pass null to hide the icon entirely.
`wrapperClassName`	`string`	-	Additional CSS classes to apply to the wrapper element.
`className`	`string`	-	Additional CSS classes to apply to the input element.
`placeholder`	`string`	-	Placeholder text for the input.
`disabled`	`boolean`	`false`	Whether the input is disabled.

Examples

Basic Usage

tsx

<Input placeholder="Type something..." />

Disabled

tsx

<Input placeholder="Disabled input" disabled />

Different Input Types

tsx

<Input type="email" icon={null} placeholder="Email address" />
<Input type="password" icon={null} placeholder="Password" />
<Input type="number" icon={null} placeholder="Enter number" />