Search
Desktop10 components34 variants4 recreations
Desktop search: header trigger, global popover, autocomplete, match highlights, recents, scoped search, results and no results.
$9, or included with Pro
Date, time and calendars (Desktop)
Desktop packActions and input
Desktop date and time fields, calendar and range pickers, time zones, month, week and day views, events and slot pickers.
- components
- 17
- variants
- 73
- recreations
- 4
- themes
- 5
Also for mobile: Date, time and calendars
What’s inside
Fourteen date and time patterns for web apps: segmented date and time fields, a calendar popover, a two-month range picker with presets, month and year pickers, a time zone selector, relative presets, month, week and day calendar views, events, a slot picker and an availability grid. UK formats by default, with US, ISO, 12-hour and right-to-left examples.
- Month grids built from day cells, so any month can be shown
- UK, US and ISO date formats, 24-hour and 12-hour time
- 4 recreations of real calendar and booking UIs
Segmented date field
5 variants
Date field formats
3 variants
- UK
- US
- ISO
Calendar popover
Free sample4 variants
- Closed
- Open
- Keyboard focus
- Unavailable date
Two-month range picker
4 variants
Date and time field
4 variants
Segmented time field
10 variants
Time list
2 variants
Month and year picker
3 variants
Time zone selector
4 variants
Relative presets
4 variants
Month view
3 variants
Week view
4 variants
Day and agenda view
2 variants
- Day
- Agenda
Event
12 variants
- Chip
- Block
- All-day
Event card
3 variants
Slot picker
4 variants
Availability grid
2 variants
- Weekly hours
- Find a time
- Figma file
- SuperDuper Pack: Date, time and calendars (Desktop)
- Themes
- Light, Dark, Light high contrast, Dark high contrast and Wireframe
- Densities
- Comfortable and Compact
- Also in the file
- Usage and accessibility notes, motion specs, Figma variables
- Covers 2 UI elements and 1 screen pattern
- Date picker, Time picker and Booking & date selection
How Google Calendar, Calendly and Airbnb and others do it
Recreations of real products, so you can compare approaches side by side. They are approximate, built from public product knowledge, with placeholder data and no third-party artwork.
Team calendar
Recreated from Google Calendar
Booking page
Recreated from Calendly
Stays dates
Recreated from Airbnb
Due dates
Recreated from Linear
Not affiliated with, endorsed or sponsored by Google Calendar, Calendly, Airbnb and Linear. Their names are trade marks of their owners and are used only to say what each recreation is based on.
See the calendar popover full size, free
A date field with its calendar popover: closed, open, keyboard focus and an unavailable date. All 4 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.
More actions and input packs
Selection controls
Desktop13 components54 variants3 recreations
Desktop checkbox and radio groups, setting switches, sliders, steppers, ratings, swatches, a colour picker and a transfer list.
$9, or included with Pro
Chips, tags and badges
Desktop10 components64 variants3 recreations
Desktop tags, labels, lozenges, count badges and status indicators, sized for dense tables and sidebars.
$9, or included with Pro
Questions about the date, time and calendars pack
One Figma file: SuperDuper Pack: Date, time and calendars (Desktop). It has 17 components with 73 variants, 4 recreations, and notes on when to use each part. Everything uses Figma variables, so you can change the colours and type to match your product.