🌈 @zenithui/time-picker

A ZenithUi Time Picker is a React component that provides a smooth and accessible interface for selecting time. Featuring a scrollable design for hours, minutes, and (AM/PM) selection, it supports both 12-hour and 24-hour formats with seamless customization options for a modern user experience.

📦 Installation

Install the library using your preferred package manager:

npm install @zenithui/time-picker
# or
yarn add @zenithui/time-picker
# or
pnpm add @zenithui/time-picker

⏳ TimePicker

Once installed, you can use the TimePicker component in your React application as follows:

import { TimePicker } from "@zenithui/time-picker";

const App = () => {
  const [selectedTime, setSelectedTime] = useState("12:00");

  return (
    <div>
      <h1>Selected Time: {selectedTime}</h1>
      <TimePicker time={selectedTime} onTimeChange={setSelectedTime} />
    </div>
  );
};

⏳ CountDownTimer

The CountDownTimer component provides a countdown timer with customization options such as labels, descriptions, and expiry callbacks.

Basic Countdown

import CountDownTimer from "@zenithui/time-picker";

<CountDownTimer
  startTime={new Date().toISOString()}
  onExpired={(isExpire) => console.log("Timer expired:", isExpire)}
/>

Countdown with Description

import CountDownTimer from "@zenithui/time-picker";

<CountDownTimer
  startTime={new Date().toISOString()}Prop Name Type Description Default
  description="until the event starts"
  descriptionClassName="text-gray-500"
/>

Countdown with Labels

import CountDownTimer from "@zenithui/time-picker";

<CountDownTimer
  startTime={new Date().toISOString()}
  format="with-names"
/>

Custom Styling

import CountDownTimer from "@zenithui/time-picker";

<CountDownTimer
  startTime={new Date().toISOString()}
  className="font-bold text-blue-500"
/>

🎨 Styling

ZenithUi components are designed to be flexible and styled easily. Combine them with your existing CSS or utility-first frameworks like TailwindCSS for full control over the appearance.

📦 Other Components

🤝 Contributing

Contributions are welcome! Please check out our contributing guide for more details.

🐛 Reporting Issues

Found a bug or have a feature request? Create an issue on GitHub.

📄 License

ZenithUi is licensed under the MIT License.

Happy coding! 🚀

Package detail