Calendar
Installation
Run the following command
npx vibes@latest add calendarUsage
import { Calendar } from '@/vibes/soul/primitives/calendar';function Usage() { return ( <Calendar mode="single" /> );}API Reference
CalendarProps
| Prop | Type | Default |
|---|---|---|
children* | ReactNode | |
className | string | |
colorScheme | 'light' | 'dark' | 'light' |
Refer to the React Day Picker documentation for additional properties.
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --calendar-font-family: var(--font-family-body); --calendar-light-focus: var(--foreground); --calendar-light-border: var(--contrast-100); --calendar-light-text: var(--foreground); --calendar-light-background: var(--background); --calendar-light-button-border-hover: var(--contrast-200); --calendar-light-selected-button-background: var(--primary); --calendar-light-selected-button-text: var(--foreground); --calendar-light-selected-middle-button-background: transparent; --calendar-light-text-disabled: var(--contrast-300); --calendar-light-range-background: var(--primary-highlight); --calendar-dark-focus: var(--background); --calendar-dark-border: var(--contrast-500); --calendar-dark-text: var(--background); --calendar-dark-background: var(--foreground); --calendar-dark-button-border-hover: var(--contrast-400); --calendar-dark-selected-button-background: var(--primary); --calendar-dark-selected-button-text: var(--foreground); --calendar-dark-selected-middle-button-background: transparent; --calendar-dark-text-disabled: var(--contrast-300); --calendar-dark-range-background: color-mix(in oklab, var(--primary), white 60%);}