Getting StartedInstallation and setup guides 6
FormInput and selection components 26
LayoutWorkflow and structural layout components 10
NavigationMenu surfaces and hierarchical actions 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 6
UtilityGeneral-purpose interface utilities 7
Overview API Styling Examples

Examples

These examples show the styled wrapper in its default plain-CSS presentation and in a theme-aware Tailwind shell across common use cases.

Form usage

Month Daypicker fits naturally into forms where a recurring date — birthday, anniversary, or annual deadline — is one submitted field.

Month Daypicker form usage

Live form

Choose an anniversary date

Select a month and day combination for a recurring annual event.

The chosen month-day is part of the form until submit or reset.

Default wrapper

Stock behavior with editable MM-DD input and month-then-day calendar navigation.

Default wrapper (Plain-CSS)

The default wrapper picks up the theme contract without extra utility classes.

Disabled state

The entire field — input, trigger, and calendar — is inert when disabled is true.

Disabled state (Plain-CSS)

Disabled styling flows through the [data-disabled] state hook on the host and cells.

Read-only

The text field is read-only but the calendar popup remains accessible for selection.

Read-only (Plain-CSS)

Manual typing is blocked but calendar-based selection still commits a value.