Month Grid

A month calendar. A pill glides to the selected day, the grid slides in from the side when the month changes, and a horizontal swipe changes the month too. Days outside the month are faded but still selectable, and days with events show a dot and say so to screen readers. Dates are local YYYY-MM-DD strings, so nothing shifts a day near midnight or across time zones. 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 month-grid

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/month-grid.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 { MonthGrid } from "@/components/ui/month-grid";

export default function Example() {
  const [month, setMonth] = useState("2026-11");
  const [day, setDay] = useState<string | null>("2026-11-04");

  return (
    <MonthGrid
      month={month}
      onMonthChange={setMonth}
      selected={day}
      onSelect={setDay}
      marked={["2026-11-09", "2026-11-16"]}
    />
  );
}

Props