CalendarInPopover() — ui Function Reference

Architecture documentation for the CalendarInPopover() function in calendar-example.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ CalendarInPopover() — ui Function Reference

Dependency Diagram

graph TD
  6b576d52_7147_1d7f_b6b1_322acdcda0c1["CalendarInPopover()"]
  56746db4_bde3_b797_f7fa_14d8b5e6af22["calendar-example.tsx"]
  6b576d52_7147_1d7f_b6b1_322acdcda0c1 -->|defined in| 56746db4_bde3_b797_f7fa_14d8b5e6af22
  style 6b576d52_7147_1d7f_b6b1_322acdcda0c1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/calendar-example.tsx lines 61–84

function CalendarInPopover() {
  return (
    <Example title="In Popover">
      <Popover>
        <PopoverTrigger
          render={<Button variant="outline" className="px-2.5 font-normal" />}
        >
          <IconPlaceholder
            lucide="CalendarIcon"
            tabler="IconCalendar"
            hugeicons="CalendarIcon"
            phosphor="CalendarBlankIcon"
            remixicon="RiCalendarLine"
            data-icon="inline-start"
          />
          Open Calendar
        </PopoverTrigger>
        <PopoverContent className="w-auto p-0" align="start">
          <Calendar mode="single" />
        </PopoverContent>
      </Popover>
    </Example>
  )
}