Popover

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Dimensions</Button>
  </PopoverTrigger>
  <PopoverContent className="w-80">
    <div className="grid gap-3">
      <div className="grid gap-1.5">
        <Label htmlFor="width">Width</Label>
        <Input id="width" defaultValue="100%" />
      </div>
      <div className="grid gap-1.5">
        <Label htmlFor="max-width">Max. width</Label>
        <Input id="max-width" defaultValue="300px" />
      </div>
      <div className="grid gap-1.5">
        <Label htmlFor="height">Height</Label>
        <Input id="height" defaultValue="25px" />
      </div>
      <div className="grid gap-1.5">
        <Label htmlFor="max-height">Max. height</Label>
        <Input id="max-height" defaultValue="none" />
      </div>
    </div>
  </PopoverContent>
</Popover>

<>
  <Popover><PopoverTrigger asChild><Button variant="outline">Top</Button></PopoverTrigger>
    <PopoverContent side="top">Above</PopoverContent></Popover>
  <Popover><PopoverTrigger asChild><Button variant="outline">Right</Button></PopoverTrigger>
    <PopoverContent side="right">Right</PopoverContent></Popover>
  <Popover><PopoverTrigger asChild><Button variant="outline">Bottom</Button></PopoverTrigger>
    <PopoverContent side="bottom">Below</PopoverContent></Popover>
  <Popover><PopoverTrigger asChild><Button variant="outline">Left</Button></PopoverTrigger>
    <PopoverContent side="left">Left</PopoverContent></Popover>
</>

<Popover>
  <PopoverTrigger asChild>
    <Button>Invite</Button>
  </PopoverTrigger>
  <PopoverContent className="w-80">
    <div className="flex flex-col gap-3">
      <div>
        <Field>
          <FieldLabel>Invite members</FieldLabel>
          <FieldDescription>Teammates you invite will join as members.</FieldDescription>
        </Field>
      </div>
      <Input placeholder="name@company.com" />
      <div className="flex justify-end gap-2">
        <Button variant="ghost">Cancel</Button>
        <Button>Send invite</Button>
      </div>
    </div>
  </PopoverContent>
</Popover>