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 DayStripCountsDemo() {
const [none, setNone] = React.useState<string[]>([]);
const [one, setOne] = React.useState(["03:00"]);
const [full, setFull] = React.useState([
"00:00",
"04:00",
"08:00",
"12:00",
"16:00",
"20:00",
]);
return (
<div className="flex w-96 flex-col gap-10">
<DayStrip value={none} onValueChange={setNone} />
<DayStrip value={one} onValueChange={setOne} />
<DayStrip value={full} onValueChange={setFull} />
</div>
);
}
Dependencies
More by joseestevez520
View all
Chart
1
Marquee
Prose
File Drop Zone