# Time components

> Choose from 10 time-related React components—clocks, timers, and more—built for Tailwind CSS and Next.js projects.

35 components available. Showing all of them below.

- [Time With Icon](https://21st.dev/@ruixen.ui/components/time-with-icon.md) — by Ruixen UI
- [Input](https://21st.dev/@originui/components/input/time-input.md) — by Origin UI
- [Input](https://21st.dev/@originui/components/input/date-and-time-input.md) — by Origin UI
- [Calendar](https://21st.dev/@shugar/components/calendar.md) — by tigran tumasov
- [Select](https://21st.dev/@originui/components/select/timezone-select.md) — by Origin UI
- [Sliding Number](https://21st.dev/@ibelick/components/sliding-number/clock.md) — by Julien Thibeaut
- [Datetime Picker](https://21st.dev/@BelkacemYerfa/components/datetime-picker.md) — by Yerfa Belkacem
- [Scroll Area](https://21st.dev/@lina.sameer/components/scroll-area-1/timezone-select.md) — by lina.sameer
- [Flip Clock](https://21st.dev/@ruixen.ui/components/flip-clock.md) — by Ruixen UI
- [Orbital Clock](https://21st.dev/@jatin-yadav05/components/orbital-clock.md) — by Jatin Yadav
- [Weather Widget](https://21st.dev/@fahadyaseen001/components/weather-widget/weather-widget-demo.md) — by Fahad Yaseen
- [glass-clock](https://21st.dev/@kedhareswer.12110626/components/glass-clock.md) — by Kedhareswer Naidu
- [Clock](https://21st.dev/@designali-in/components/clock.md) — by Ali Imam
- [Glass Time Card](https://21st.dev/@oldkong88/components/glass-time-card/glass-time-card.md) — by SEONG HUN
- [TimePicker](https://21st.dev/@mohammadalhabil1999/components/time-picker.md) — by Mohammad AlHabil
- [Shader Clock](https://21st.dev/@Daniela_Muntyan/components/shader-clock.md) — by Daniela Muntyan
- [Time picker](https://21st.dev/@preetsuthar17/components/time-picker.md) — by Preet Suthar
- [Relative Time Card](https://21st.dev/@shugar/components/relative-time-card.md) — by tigran tumasov
- [Date Badge](https://21st.dev/@hibatillah/components/date-badge.md) — by habib
- [Combobox](https://21st.dev/@ShadcnStudio/components/combobox/timezone-combobox.md) — by ShadcnStudio
- [Relative Time Card](https://21st.dev/@shugar/components/relative-time-card-1.md) — by tigran tumasov
- [Timestamp](https://21st.dev/@oldkong88/components/timestamp/duration-badge.md) — by SEONG HUN
- [Relative Time](https://21st.dev/@haydenbleasel/components/relative-time.md) — by Hayden Bleasel
- [Relative Time](https://21st.dev/@haydenbleasel/components/relative-time/controlled-time.md) — by Hayden Bleasel
- [Relative Time](https://21st.dev/@haydenbleasel/components/relative-time/custom-date-format.md) — by Hayden Bleasel
- [Relative Time](https://21st.dev/@haydenbleasel/components/relative-time/custom-time-format.md) — by Hayden Bleasel
- [HeroUI Time Field](https://21st.dev/@hero_ui/components/heroui-time-field.md) — by Hero Ui
- [Analog Clock Component](https://21st.dev/@uniquesonu/components/analog-clock-component.md) — by Sonu
- [Relative Time Card](https://21st.dev/@shugar/components/relative-time-card-old.md) — by tigran tumasov
- [HeroUI Time Field](https://21st.dev/@hero_ui/components/heroui-time-field/validation.md) — by Hero Ui
- [HeroUI Time Field](https://21st.dev/@hero_ui/components/heroui-time-field/disabled.md) — by Hero Ui
- [HeroUI Time Field](https://21st.dev/@hero_ui/components/heroui-time-field/with-icons.md) — by Hero Ui
- [HeroUI Time Field](https://21st.dev/@hero_ui/components/heroui-time-field/controlled.md) — by Hero Ui
- [Clock 5 Icon](https://21st.dev/@skyleen77/components/icons-clock-5.md) — by Elliot Sutton
- [RelativeTimeCard](https://21st.dev/@popov-dmitry/components/relative-time-card.md) — by Popov Dmitry

Full component directory: https://21st.dev/llms.txt