ComponentsForm Blocks
Calendar
Date picker calendar built on react-day-picker v9. Supports single, range, and multiple selection modes, RTL, week numbers, disabled dates, multi-month view, and an optional footer slot.
Playground
Installation
pnpm add @tessinaui/ui react-day-pickerUsage
import { Calendar } from "@tessinaui/ui";{/* Single date */}
<Calendar mode="single" selected={date} onSelect={setDate} />
{/* Date range */}
<Calendar mode="range" selected={range} onSelect={setRange} numberOfMonths={2} />
{/* Multiple dates */}
<Calendar mode="multiple" selected={dates} onSelect={setDates} />Showcase
API Reference
Calendar props
All props from react-day-picker's DayPicker are accepted in addition to the props below.
Style
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | "md" | Day cell size. sm=32px, md=36px, lg=40px. Caption and weekday text scales accordingly. |
width | "narrow" | "default" | "wide" | "default" | Container padding. narrow=p-2, default=p-3, wide=p-5. |
rounded | "none" | "sm" | "md" | "lg" | "xl" | "full" | "md" | Border radius of the outer container. |
className | string | — | Added to the outer container <div> |
Selection
| Prop | Type | Description |
|---|---|---|
mode | "single" | "range" | "multiple" | Selection behaviour |
selected | Date | DateRange | Date[] | Controlled selected value |
onSelect | function | Called when selection changes |
defaultMonth | Date | Month shown on first render |
Layout
| Prop | Type | Default | Description |
|---|---|---|---|
numberOfMonths | number | 1 | Number of months displayed side-by-side |
showOutsideDays | boolean | true | Show days from adjacent months |
fixedWeeks | boolean | false | Always render 6 weeks so height stays constant |
showWeekNumber | boolean | false | Show ISO week number column |
Constraints
| Prop | Type | Description |
|---|---|---|
fromDate | Date | Earliest selectable date |
toDate | Date | Latest selectable date |
disabled | Matcher | Matcher[] | Disable specific dates or ranges (e.g., (d) => d.getDay() === 0) |
disableNavigation | boolean | Lock the month/year so the user cannot navigate |
Direction
| Prop | Type | Default | Description |
|---|---|---|---|
dir | "ltr" | "rtl" | "ltr" | Text direction. RTL flips nav arrows and calendar layout automatically. |
Date & Time Panel
| Prop | Type | Default | Description |
|---|---|---|---|
showDateTime | boolean | false | Show built-in Start/End date & time inputs with Apply button |
dateTimeLayout | "vertical" | "horizontal" | "vertical" | vertical renders the panel below the calendar; horizontal renders it to the side |
showTime | boolean | true | Show time inputs alongside the date inputs |
showTimezone | boolean | false | Show local timezone label below Apply button |
onApply | (data: CalendarApplyData) => void | — | Fired when Apply is clicked |
Footer
| Prop | Type | Description |
|---|---|---|
footer | ReactNode | Rendered below the calendar grid — useful for preset date buttons |
CalendarApplyData type
import type { CalendarApplyData } from "@tessinaui/ui";
interface CalendarApplyData {
start?: Date;
startTime?: string; // "HH:MM"
end?: Date;
endTime?: string; // "HH:MM"
}DateRange type
import type { DateRange } from "@tessinaui/ui";
interface DateRange {
from: Date | undefined;
to?: Date | undefined;
}File Upload
Drag-and-drop file upload with file list, progress, validation, four visual variants, five sizes, intent colours, and per-file status (idle/uploading/success/error).
Alert
Contextual feedback messages for user actions or system events. Four visual variants (solid, soft, outline, ghost), five intents, three sizes, six rounded options, optional close button, actions, and RTL support.