Calendar Strip

A horizontal strip of days. A pill glides behind the selected day on a spring, and the strip scrolls to keep that day centred. Dates are local dates in YYYY-MM-DD form, so nothing shifts a day near midnight or across time zones. Each day is a button that reads out its full date, and days with events say so. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add calendar-strip

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/calendar-strip.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { useState } from "react";
import { CalendarStrip } from "@/components/ui/calendar-strip";

export default function Example() {
  const [day, setDay] = useState("2026-11-04");

  return (
    <CalendarStrip
      selected={day}
      onSelect={setDay}
      startDate="2026-11-01"
      marked={["2026-11-03", "2026-11-10"]}
    />
  );
}

Props