Popover

Displays rich content in a portal, triggered by a button.

import { ListFilterIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Checkbox,
  CheckboxControl,
  CheckboxGroup,
  CheckboxLabel,
} from "@/components/ui/checkbox"
import {
  Popover,
  PopoverCloseTrigger,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

export default function Component() {
  return (
    <div className="flex flex-col gap-4">
      <Popover>
        <PopoverTrigger asChild>
          <Button variant="outline" size="icon" aria-label="Filters">
            <ListFilterIcon size={16} aria-hidden="true" />
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-36 p-3">
          <div className="space-y-3">
            <div className="font-medium text-muted-foreground text-xs">
              Filters
            </div>
            <form>
              <CheckboxGroup className="space-y-3">
                <Checkbox className="flex items-center gap-2">
                  <CheckboxControl />
                  <CheckboxLabel className="font-normal">
                    Real Time
                  </CheckboxLabel>
                </Checkbox>
                <Checkbox className="flex items-center gap-2">
                  <CheckboxControl />
                  <CheckboxLabel className="font-normal">
                    Top Channels
                  </CheckboxLabel>
                </Checkbox>
                <Checkbox className="flex items-center gap-2">
                  <CheckboxControl />
                  <CheckboxLabel className="font-normal">
                    Last Orders
                  </CheckboxLabel>
                </Checkbox>
                <Checkbox className="flex items-center gap-2">
                  <CheckboxControl />
                  <CheckboxLabel className="font-normal">
                    Total Spent
                  </CheckboxLabel>
                </Checkbox>
              </CheckboxGroup>
              <div
                aria-orientation="horizontal"
                className="-mx-3 my-3 h-px bg-border"
              />
              <div className="flex justify-between gap-2">
                <PopoverCloseTrigger asChild>
                  <Button
                    size="sm"
                    variant="outline"
                    type="button"
                    className="h-7 px-2"
                  >
                    Clear
                  </Button>
                </PopoverCloseTrigger>
                <Button type="button" size="sm" className="h-7 px-2">
                  Apply
                </Button>
              </div>
            </form>
          </div>
        </PopoverContent>
      </Popover>
    </div>
  )
}

Installation

Copy and paste the following code into your project.

"use client"

import * as React from "react"

import { Popover as PopoverPrimitive } from "@ark-ui/react/popover"
import { Portal } from "@ark-ui/react/portal"

import { cn } from "@/lib/utils"

const Popover = PopoverPrimitive.Root

const PopoverAnchor = PopoverPrimitive.Anchor

const PopoverArrow = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Arrow>,
  PopoverPrimitive.ArrowProps
>(({ className, ...props }, ref) => (
  <PopoverPrimitive.Arrow
    ref={ref}
    className={cn(
      "[--arrow-background:var(--popover)] [--arrow-size:calc(var(--spacing)*2)]",
      className
    )}
    {...props}
  >
    <PopoverPrimitive.ArrowTip className="border-t border-l" />
  </PopoverPrimitive.Arrow>
))
PopoverArrow.displayName = "PopoverArrow"

const PopoverCloseTrigger = PopoverPrimitive.CloseTrigger

const PopoverContent = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Content>,
  PopoverPrimitive.ContentProps
>(({ className, ...props }, ref) => (
  <Portal>
    <PopoverPrimitive.Positioner>
      <PopoverPrimitive.Content
        ref={ref}
        className={cn(
          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in",
          className
        )}
        {...props}
      />
    </PopoverPrimitive.Positioner>
  </Portal>
))
PopoverContent.displayName = "PopoverContent"

const PopoverContext = PopoverPrimitive.Context

const PopoverDescription = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Description>,
  PopoverPrimitive.DescriptionProps
>(({ className, ...props }, ref) => (
  <PopoverPrimitive.Description
    ref={ref}
    className={cn("text-muted-foreground text-sm", className)}
    {...props}
  />
))
PopoverDescription.displayName = "PopoverDescription"

const PopoverRootProvider = PopoverPrimitive.RootProvider

const PopoverTitle = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Title>,
  PopoverPrimitive.TitleProps
>(({ className, ...props }, ref) => (
  <PopoverPrimitive.Title
    ref={ref}
    className={cn("font-semibold text-lg leading-none", className)}
    {...props}
  />
))
PopoverTitle.displayName = "PopoverTitle"

const PopoverTrigger = PopoverPrimitive.Trigger

export {
  Popover,
  PopoverAnchor,
  PopoverArrow,
  PopoverCloseTrigger,
  PopoverContent,
  PopoverContext,
  PopoverDescription,
  PopoverRootProvider,
  PopoverTitle,
  PopoverTrigger,
}

export { usePopover } from "@ark-ui/react/popover"

Update the import paths to match your project setup.

Usage

import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover"

<Popover>
  <PopoverTrigger>Open</PopoverTrigger>
  <PopoverContent>
    <PopoverTitle>Title</PopoverTitle>
    <PopoverDescription>Description</PopoverDescription>
    Place content for the popover here.
  </PopoverContent>
</Popover>

Installation

Usage