React - v1.0.1

Button

A versatile button with DaisyUI color variants, icons, loading state, tooltip, badge, and optional link rendering.

Also accepts all native <button> HTML attributes. The type attribute defaults to 'button'.

<Button color="primary" icon={<PlusIcon />} loading={isSaving}>
  Add Item
</Button>

Input

A text input with label, hint/error text, icons, prefix/suffix adornments, clearable action, and inline label mode.

Also accepts all native <input> HTML attributes (excluding prefix and size).

<Input
  label="Email"
  type="email"
  placeholder="you@example.com"
  icon={<MailIcon />}
  error={errors.email}
  required
/>

Select

A dropdown select that maps options from a data array, with placeholder, icons, and inline label mode.

Also accepts all native <select> HTML attributes (excluding size).

const countries = [
  { id: 'us', name: 'United States' },
  { id: 'ca', name: 'Canada' },
];

<Select label="Country" options={countries} placeholder="Select a country" required />

Checkbox

A single checkbox input with label, hint/error, DaisyUI color variants, and an optional card layout.

Also accepts all native <input> HTML attributes (excluding size and type).

<Checkbox label="Accept terms and conditions" color="primary" required />

Toggle

A switch/toggle component rendered as a styled checkbox with role="switch" for accessibility.

Also accepts all native <input> HTML attributes (excluding size and type).

<Toggle label="Enable notifications" color="success" />

Textarea

A multi-line text input with label, hint/error text, inline label mode, and read-only styling.

Also accepts all native <textarea> HTML attributes.

<Textarea label="Comments" placeholder="Enter your comments..." rows={5} required />

Radio

A radio button group that renders options from an array with standard and card layouts, per-option hints, and DaisyUI color variants.

Also accepts all native <input> HTML attributes (excluding size and type).

const sizes = [
  { id: 'sm', name: 'Small' },
  { id: 'md', name: 'Medium' },
  { id: 'lg', name: 'Large' },
];

<Radio label="Size" options={sizes} color="primary" inline />

DatePicker

A date/time selection component using native HTML date inputs with DaisyUI styling.

Also accepts all native <input> HTML attributes (excluding size, type, and prefix).

<DatePicker label="Start Date" dateType="date" required />

ColorPicker

A color picker combining a native color swatch with a hex value display, optional clear and random color buttons.

Also accepts all native <input> HTML attributes (excluding size, type, and prefix).

<ColorPicker label="Brand Color" value="#3b82f6" onChange={handleChange} clearable random />

File

A file upload component with standard file input and drag-and-drop zone modes, upload progress display, and a unified callback.

Also accepts all native <input> HTML attributes (excluding size, type, value, and defaultValue).

<File
  label="Upload Images"
  withDragDrop
  multiple
  accept="image/*"
  progress={uploadProgress}
  onFilesSelected={handleFiles}
/>

Password

A password input with a built-in visibility toggle, optional clear button, and customizable toggle icons.

Also accepts all native <input> HTML attributes (excluding type, size, and prefix).

<Password label="Password" placeholder="Enter password" required />

Pin

A multi-field PIN/OTP entry component with auto-focus navigation, clipboard paste support, and completion callbacks.

Also accepts all native <input> HTML attributes (excluding size and type).

<Pin length={6} numeric onComplete={(pin) => verifyOTP(pin)} color="primary" />

Range

A range slider input with DaisyUI styling, label, hint/error text, and color variants.

Also accepts all native <input> HTML attributes (excluding size and type). The min and max attributes default to 0 and 100 respectively.

<Range label="Volume" min={0} max={100} value={volume} onChange={handleChange} color="primary" />

Editor

A monospace-styled textarea for code or structured text editing with label, hint, and error support.

Also accepts all native <textarea> HTML attributes. Defaults to 12 rows.

<Editor label="HTML Source" placeholder="Enter HTML..." rows={20} />

RichTextEditor

A rich text editor using contentEditable with an optional toolbar, controlled HTML value management, and DaisyUI form field styling.

Also accepts all native <div> HTML attributes.

<RichTextEditor
  label="Description"
  value={html}
  onValueChange={setHtml}
  toolbar={
    <>
      <button onClick={() => document.execCommand('bold')}>B</button>
      <button onClick={() => document.execCommand('italic')}>I</button>
    </>
  }
/>