The dark version swaps light surfaces for charcoal cards and keeps accents bright. A date field and a calendar that work together. The input has default, focused and error. The calendar picks one day or a range.

What is included

• A date input with three states
• A calendar with a single mode
• A calendar with a range mode and filled days
• Today ring and month arrows
• Quick range chips

Where to use it

Use it for booking, reports and scheduling.

Design notes

This date picker and calendar popover follows a simple rule: Real components save time because you change a property and the whole set updates. Rename the variants to match your design system and connect the colors to your own styles. It includes a date input with three states, a calendar with a single mode, a calendar with a range mode and filled days, so you can start from a finished layout and change only what you need.

Built for editing

Spacing follows a 4 point scale and layers have clear names, so developers can find what they need. Fonts are free on Google Fonts, and every color can be changed from the fill panel. You also get today ring and month arrows and quick range chips.

How to use it

Copy the component with the copy button and paste it into Figma with Ctrl+V or Cmd+V. The layers keep their auto layout, so you can edit text, colors and spacing. The text uses Plus Jakarta Sans and a few free Google Fonts. Install them first so the text looks the same.

Dark version

This listing is the dark version. The light version is listed separately.