CalendarInPopover() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ CalendarInPopover() — ui Function Reference

Dependency Diagram

graph TD
  78ad04d1_dfca_16da_063e_a9af584f430c["CalendarInPopover()"]
  189fced7_34d5_a390_e619_8f0a05a614e2["calendar-example.tsx"]
  78ad04d1_dfca_16da_063e_a9af584f430c -->|defined in| 189fced7_34d5_a390_e619_8f0a05a614e2
  style 78ad04d1_dfca_16da_063e_a9af584f430c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

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

function CalendarInPopover() {
  return (
    <Example title="In Popover">
      <Popover>
        <PopoverTrigger asChild>
          <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
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-auto p-0" align="start">
          <Calendar mode="single" />
        </PopoverContent>
      </Popover>
    </Example>
  )
}