Calendar

A date grid for single, range and multiple selection, with sliding months, range previews and touch-sized days.

Installation

terminal

pnpm dlx layro-cli add @preetsuthar17/calendar

npx layro-cli add @preetsuthar17/calendar

npx layro-cli add @preetsuthar17/calendar

bunx layro-cli add @preetsuthar17/calendar

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client"

import * as React from "react"
import { useDirection } from "@base-ui/react/direction-provider"
import {
  IconChevronDown,
  IconChevronLeft,
  IconChevronRight,
  IconChevronUp,
} from "@tabler/icons-react"
import { cn } from "cn"

import {
  fromDateKey,

Free, with GitHub, Google or email. The install command above works without an account.

Versions

1.0.0 · current
Nov 7, 2026
First release.

Similar components

View all

Recharts Heatmap Chart