Components
Time With Icon
This component is a dynamic time input designed for modern, intuitive forms. It features a left-aligned icon that visually represents the time of day: a sun for daytime hours, a moon for nighttime, and a clock as a default when no time is set. The icon updates automatically as the user selects a time, providing immediate visual feedback. Built with shadcn/ui’s Input and Label, it maintains clean spacing and alignment.
import TimeWithIcon from "@/components/ui/time-with-icon";
export default function DemoOne() {
return (
<div className="flex flex-col">
<TimeWithIcon />
<TimeWithIcon defaultTime="07:30" />
<TimeWithIcon defaultTime="22:15" />
</div>
);
}
Dependencies
Published
Similar components
Explore more
Part of Ruixen UI — browse the full library on 21st.dev.