About
A draggable day/night timeline for picking several times of day, each shown as a sun or moon knob you drag, add with a click, or remove with Delete — ported to React from Jose Estevez's elastic-ui Vue component (MIT licensed).
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Day Strip to your project and fits it to your theme.
Code
How Day Strip is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import * as React from "react";
import DayStrip from "@/components/ui/day-strip";
export default function DayStripSpanishDemo() {
const [times, setTimes] = React.useState(["03:00"]);
return (
<div className="w-96">
<DayStrip
value={times}
onValueChange={setTimes}
label="Horas"
addLabel="Añadir una hora"
/>
</div>
);
}
Dependencies
More by joseestevez520
View all
Marquee
Chart
Prose
File Drop Zone