@darksnow-ui/input

A flexible and customizable Input component for React applications.

Installation

``bash
pnpm add @darksnow-ui/input
`

Usage

`tsx
import { Input } from "@darksnow-ui/input"
import "@darksnow-ui/input/styles.css"

function App() {
return
}
`

Props

| Prop | Type | Default | Description |
| --------- | ----------------------------------- | ----------- | --------------------------------------- |
| variant | 'default' \| 'error' \| 'success' | 'default' | Visual variant of the input |
| size | 'sm' \| 'md' \| 'lg' | 'md' | Size of the input |
| leftIcon | ReactNode | - | Icon to display on the left side |
| rightIcon | ReactNode | - | Icon to display on the right side |
| isLoading | boolean | false | Whether the input is in a loading state |
| focusRing | boolean | true | Whether to show focus ring |
| ...props | InputHTMLAttributes | - | All native input attributes |

Examples

$3

`tsx

`

$3

`tsx
import { Label } from "@darksnow-ui/label"

`tsx
import { Input } from '@darksnow-ui/input'
import { Search, Mail } from 'lucide-react'

// Left icon
leftIcon={