Input | nexvyn/ui | Nexvyn UI

"use client"

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

export default function InputDemo() {
  return (
    <div className="flex w-[300px] flex-col gap-4">
      <Input type="text" placeholder="Default input" />
      <Input type="email" placeholder="Email input" />
      <Input type="password" placeholder="Password input" />
      <Input type="text" placeholder="Disabled input" disabled />
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add https://ui.nexvyn.dev/r/styles/new-york-v4/input.json

Copy the component:

Update imports to match your project structure.

Usage

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

<Input type="email" placeholder="Email" />

Examples

Default

<Input type="text" placeholder="Enter text..." />

Email

<Input type="email" placeholder="Email address" />

Password

<Input type="password" placeholder="Password" />

With Label

<div className="grid w-full max-w-sm items-center gap-1.5">
  <Label htmlFor="email">Email</Label>
  <Input type="email" id="email" placeholder="Email" />
</div>

Disabled

<Input disabled type="text" placeholder="Disabled input" />

With Button

<div className="flex w-full max-w-sm items-center space-x-2">
  <Input type="email" placeholder="Email" />
  <Button type="submit">Subscribe</Button>
</div>