Getting Started

Simple example to start using timepicker-ui-react

Basic Usage

The simplest way to create a timepicker with default settings:

Basic Timepicker

Default 12-hour format with AM/PM

import { Timepicker } from "timepicker-ui-react";
import "timepicker-ui/main.css";

function App() {
  return (
    <Timepicker
      placeholder="Select time"
      className="px-4 py-2 rounded-lg border"
    />
  );
}

Installation

Install the package and import required styles:

# Install timepicker-ui-react
npm install timepicker-ui-react

# Import in your component
import { Timepicker } from "timepicker-ui-react";
import "timepicker-ui/main.css";

Props

The component extends standard HTML input attributes:

<Timepicker
  // Standard input props
  placeholder="Select time"
  className="custom-class"
  disabled={false}
  required
  name="appointment-time"
  
  // Timepicker-specific props
  value="12:00 PM"
  defaultValue="9:00 AM"
  options={{
    clock: { type: "12h" },
    ui: { theme: "basic" }
  }}
/>