Custom Styling

Apply custom classes and inline styles

Custom Classes

Use className prop to apply custom styles:

Tailwind Classes

Custom border, padding, and colors

import { Timepicker } from "timepicker-ui-react";

function App() {
  return (
    <Timepicker
      className="px-6 py-3 text-lg rounded-xl border-2 border-purple-500"
    />
  );
}

Inline Styles

<Timepicker
  style={{
    fontFamily: "monospace",
    fontSize: "16px"
  }}
/>

Combined Styling

Combine className, style, and theme options:

<Timepicker
  className="custom-timepicker"
  style={{ maxWidth: "300px" }}
  options={{
    ui: { theme: "dark" }
  }}
/>