Forms

Calendar

A date field component that allows users to enter and edit date. Built with react-day-picker.

May 2025

Installation

npx benflux-ui add calendar

Usage

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

export default function Example() {
  const [date, setDate] = useState<Date | undefined>(new Date())

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