Yami

Calendar

A date field component that allows selecting dates.

June 2026

Installation

Add the calendar component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/calendar.json

Usage

import { Calendar } from "@/components/ui/calendar"

<Calendar mode="single" defaultMonth={new Date()} className="border border-border" />

Examples

Default

June 2026

Code

import { Calendar } from "@/components/ui/calendar"

<Calendar mode="single" defaultMonth={new Date()} className="border border-border" />