Calendar

A calendar component that allows users to select a date or a range of dates.

October 2026

import * as React from "react"
import { Calendar } from "uilab-core"

export function CalendarPreview() {
  const [date, setDate] = React.useState<Date | undefined>(new Date())

Usage

import { Calendar } from "uilab-core"

const [date, setDate] = React.useState<Date | undefined>(new Date())

return (
  <Calendar
    mode="single"
    selected={date}
    onSelect={setDate}
    className="rounded-lg border"
  />
)

Button

Card

Displays a card with header, content, and footer.

Su	Mo	Tu	We	Th	Fr	Sa

Calendar

UsageCopy Anchor Link

On this page

Usage