Skip to content
timepicker-ui
React · Themes

Custom Styling

Apply custom classes and inline styles

Custom Classes

Use className prop to apply custom styles:

Tailwind Classes

Custom border, padding, and colors

index.tsxtsx
1import { Timepicker } from "timepicker-ui-react";
2

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

Inline Styles

index.tsxtsx
1<Timepicker
2  style={{
3    fontFamily: "monospace",
4    fontSize: "16px"
5  }}
6/>

Combined Styling

Combine className, style, and theme options:

index.tsxtsx
1<Timepicker
2  className="custom-timepicker"
3  style={{ maxWidth: "300px" }}
4  options={{
5    ui: { theme: "dark" }
6  }}
7/>