Day Strip

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.

"use client";

import * as React from "react";
import DayStrip from "@/components/ui/day-strip";

export default function DayStripCloseDemo() {
  const [times, setTimes] = React.useState(["09:00", "09:15", "09:30"]);

  return (
    <div className="w-96">
      <DayStrip value={times} onValueChange={setTimes} />
    </div>
  );
}