Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/time-with-iconimport 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>
);
}