Composition recipe

Date Picker

Compose Calendar inside Popover. The trigger owns the accessible label and the selected date stays controlled by the feature using it.

No standalone wrapper

This recipe intentionally stays in application code. Install only the primitives your implementation uses.

Building blocks

calendar popover button

Starting point

<Popover>
  <PopoverTrigger render={<Button variant="outline" />}>
    {date ? format(date, "PPP") : "Pick a date"}
  </PopoverTrigger>
  <PopoverContent className="w-auto p-0">
    <Calendar mode="single" selected={date} onSelect={setDate} />
  </PopoverContent>
</Popover>