Neumorphism UI

Calendar

Use Calendar when selecting a date or range should remain visible in the page.

Preview

Single date and range

Compare controlled single-date and range calendars, read their selected values, and clear the range.

Loading preview.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/calendar

Install the shared base once, then add components and their dependencies with the CLI.

Single date and range

npx shadcn@latest add @neumorphism-ui/calendar @neumorphism-ui/button
Registry JSON

Usage

Choose a selection mode, connect selected and onSelect, and pass the matching date locale. Use disabled dates and month boundaries to express actual booking or scheduling rules.

"use client";

import { useState } from "react";
import { Calendar } from "@/components/ui/calendar";

export default function Example() {
  const [date, setDate] = useState<Date | undefined>();
  return <Calendar mode="single" selected={date} onSelect={setDate} />;
}

API Reference

Uses DayPicker v10 date calculations and keyboard navigation. Selected endpoints are inset; range interiors form a continuous surface. No legacy prop aliases are added.

ComponentPropTypeDefaultDescription
Calendarmode"single" | "multiple" | "range"—Choose the selection mode.
Calendarselected / onSelectDate | Date[] | DateRange / callback—Connect selection state and its change callback.
Calendardisabled / locale / startMonth / endMonthDayPickerProps—Set disabled dates, locale and navigable month bounds.

Accessibility

  • 01

    Use arrow keys to move between dates and Enter or Space to select.

  • 02

    Retain the library's accessible labels for endpoints, today and disabled dates.