Neo Input

Neo Input

High-contrast input field with focus shadow effect

1
import { NeoInput } from "@/components/ui/neo-input"
2
3
export function NeoInputDemo() {
4
  return (
5
    <div className="flex flex-col gap-4">
6
      <NeoInput label="Email" placeholder="Enter your email" />
7
    </div>
8
  )
9
}
1
<NeoInput label="Email" placeholder="Enter your email" />

Installation

npx shadcn@latest add https://grainio.vercel.app/r/NeoBrutalism/NeoInput.json

Examples

Sizes

1
<NeoInput size="sm" placeholder="Small input" />
2
<NeoInput size="md" placeholder="Medium input" />
3
<NeoInput size="lg" placeholder="Large input" />

With Label

1
<NeoInput label="Username" placeholder="Enter username" />
2
<NeoInput label="Password" placeholder="Enter password" required />

States

This field is required
1
<NeoInput placeholder="Disabled input" disabled />
2
<NeoInput placeholder="Error input" error="This field is required" />