Popover

An overlay panel triggered by a click, used for displaying additional content or forms.

Usage

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
} from '@acronis-platform/shadcn-uikit';

Basic

A simple popover with text content.

View source

import { Button } from '@acronis-platform/shadcn-uikit/react';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@acronis-platform/shadcn-uikit/react';

export function PopoverBasic() {
  return (
    <div className="flex justify-center rounded-lg border p-8">
      <Popover>
        <PopoverTrigger render={<Button variant="outline" />}>
          Open Popover
        </PopoverTrigger>
        <PopoverContent className="w-80">
          <div className="space-y-2">
            <h4 className="font-semibold leading-none">Dimensions</h4>
            <p className="text-sm text-muted-foreground">
              Set the dimensions for the layer.
            </p>
          </div>
        </PopoverContent>
      </Popover>
    </div>
  );
}

With Form

Popover containing a form with inputs and actions.

View source

import { Button, Input, Label } from '@acronis-platform/shadcn-uikit/react';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@acronis-platform/shadcn-uikit/react';

export function PopoverWithForm() {
  return (
    <div className="flex justify-center rounded-lg border p-8">
      <Popover>
        <PopoverTrigger render={<Button variant="outline" />}>
          Settings
        </PopoverTrigger>
        <PopoverContent className="w-80">
          <div className="grid gap-4">
            <div className="space-y-2">
              <h4 className="font-semibold leading-none">Dimensions</h4>
              <p className="text-sm text-muted-foreground">
                Set the dimensions for the layer.
              </p>
            </div>
            <div className="grid gap-2">
              <div className="grid grid-cols-3 items-center gap-4">
                <Label htmlFor="width">Width</Label>
                <Input
                  id="width"
                  defaultValue="100%"
                  className="col-span-2 h-8"
                />
              </div>
              <div className="grid grid-cols-3 items-center gap-4">
                <Label htmlFor="maxWidth">Max. width</Label>
                <Input
                  id="maxWidth"
                  defaultValue="300px"
                  className="col-span-2 h-8"
                />
              </div>
              <div className="grid grid-cols-3 items-center gap-4">
                <Label htmlFor="height">Height</Label>
                <Input
                  id="height"
                  defaultValue="25px"
                  className="col-span-2 h-8"
                />
              </div>
              <div className="grid grid-cols-3 items-center gap-4">
                <Label htmlFor="maxHeight">Max. height</Label>
                <Input
                  id="maxHeight"
                  defaultValue="none"
                  className="col-span-2 h-8"
                />
              </div>
            </div>
          </div>
        </PopoverContent>
      </Popover>
    </div>
  );
}

With Calendar

Popover used as a date picker container.

View source

import * as React from 'react';
import { Button } from '@acronis-platform/shadcn-uikit/react';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@acronis-platform/shadcn-uikit/react';
import { Calendar } from '@acronis-platform/shadcn-uikit/react';

export function PopoverWithCalendar() {
  const [date, setDate] = React.useState<Date>();

  return (
    <div className="flex justify-center rounded-lg border p-8">
      <Popover>
        <PopoverTrigger render={<Button variant="outline" />}>
          {date ? date.toLocaleDateString() : 'Pick a date'}
        </PopoverTrigger>
        <PopoverContent className="w-auto p-0">
          <Calendar
            mode="single"
            selected={date}
            onSelect={setDate}
          />
        </PopoverContent>
      </Popover>
    </div>
  );
}

With Actions

Popover with action buttons in the content.

View source

import { Button } from '@acronis-platform/shadcn-uikit/react';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@acronis-platform/shadcn-uikit/react';
import { InfoIcon } from '@acronis-platform/shadcn-uikit';
export function PopoverWithActions() {
  return (
    <div className="flex justify-center rounded-lg border p-8">
      <Popover>
        <PopoverTrigger render={<Button variant="outline" />}>
          <InfoIcon className="mr-2 h-4 w-4" />
          Show Info
        </PopoverTrigger>
        <PopoverContent className="w-80">
          <div className="space-y-4">
            <div>
              <h4 className="mb-2 font-semibold">Title</h4>
              <p className="text-sm text-muted-foreground">
                The discovery agent will obtain the neighbor IP addresses by
                using NetBIOS discovery, Web Service Discovery (WSD), and
                Address Resolution Protocol (ARP) table.
              </p>
            </div>
            <div className="space-y-2">
              <Button variant="link" className="h-auto p-0 text-primary">
                <span className="mr-2 h-4 w-4 rounded bg-primary" />
                First action
              </Button>
              <Button variant="link" className="h-auto p-0 text-primary">
                <span className="mr-2 h-4 w-4 rounded bg-primary" />
                Second action
              </Button>
            </div>
          </div>
        </PopoverContent>
      </Popover>
    </div>
  );
}

Placements

Popover positioned on different sides of the trigger.

View source

import { Button } from '@acronis-platform/shadcn-uikit/react';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@acronis-platform/shadcn-uikit/react';

export function PopoverPlacements() {
  return (
    <div className="flex flex-wrap justify-center gap-4 rounded-lg border p-8">
      <Popover>
        <PopoverTrigger render={<Button variant="outline" />}>
          Top
        </PopoverTrigger>
        <PopoverContent side="top" className="w-64">
          <p className="text-sm">This popover appears on top.</p>
        </PopoverContent>
      </Popover>

      <Popover>
        <PopoverTrigger render={<Button variant="outline" />}>
          Bottom
        </PopoverTrigger>
        <PopoverContent side="bottom" className="w-64">
          <p className="text-sm">This popover appears on bottom.</p>
        </PopoverContent>
      </Popover>

      <Popover>
        <PopoverTrigger render={<Button variant="outline" />}>
          Left
        </PopoverTrigger>
        <PopoverContent side="left" className="w-64">
          <p className="text-sm">This popover appears on left.</p>
        </PopoverContent>
      </Popover>

      <Popover>
        <PopoverTrigger render={<Button variant="outline" />}>
          Right
        </PopoverTrigger>
        <PopoverContent side="right" className="w-64">
          <p className="text-sm">This popover appears on right.</p>
        </PopoverContent>
      </Popover>
    </div>
  );
}

Alignments

Popover aligned to start, center, or end of the trigger.

View source

import { Button } from '@acronis-platform/shadcn-uikit/react';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@acronis-platform/shadcn-uikit/react';

export function PopoverAlignments() {
  return (
    <div className="flex flex-wrap justify-center gap-4 rounded-lg border p-8">
      <Popover>
        <PopoverTrigger render={<Button variant="outline" />}>
          Align Start
        </PopoverTrigger>
        <PopoverContent align="start" className="w-64">
          <p className="text-sm">Aligned to the start.</p>
        </PopoverContent>
      </Popover>

      <Popover>
        <PopoverTrigger render={<Button variant="outline" />}>
          Align Center
        </PopoverTrigger>
        <PopoverContent align="center" className="w-64">
          <p className="text-sm">Aligned to the center.</p>
        </PopoverContent>
      </Popover>

      <Popover>
        <PopoverTrigger render={<Button variant="outline" />}>
          Align End
        </PopoverTrigger>
        <PopoverContent align="end" className="w-64">
          <p className="text-sm">Aligned to the end.</p>
        </PopoverContent>
      </Popover>
    </div>
  );
}

Icon Triggers

Popover triggered by icon buttons.

View source

import { Button } from '@acronis-platform/shadcn-uikit/react';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@acronis-platform/shadcn-uikit/react';
import {
  BellIcon,
  HelpCircleIcon,
  SettingsIcon,
  UserIcon,
} from '@acronis-platform/shadcn-uikit';
export function PopoverIconTriggers() {
  return (
    <div className="flex flex-wrap justify-center gap-4 rounded-lg border p-8">
      <Popover>
        <PopoverTrigger render={<Button variant="ghost" size="icon" />}>
          <HelpCircleIcon className="h-5 w-5" />
        </PopoverTrigger>
        <PopoverContent className="w-80">
          <div className="space-y-2">
            <h4 className="font-semibold">Help</h4>
            <p className="text-sm text-muted-foreground">
              Need assistance? Click here to access our help documentation and
              support resources.
            </p>
          </div>
        </PopoverContent>
      </Popover>

      <Popover>
        <PopoverTrigger render={<Button variant="ghost" size="icon" />}>
          <SettingsIcon className="h-5 w-5" />
        </PopoverTrigger>
        <PopoverContent className="w-80">
          <div className="space-y-2">
            <h4 className="font-semibold">Settings</h4>
            <p className="text-sm text-muted-foreground">
              Customize your preferences and configure application settings.
            </p>
          </div>
        </PopoverContent>
      </Popover>

      <Popover>
        <PopoverTrigger render={<Button variant="ghost" size="icon" />}>
          <BellIcon className="h-5 w-5" />
        </PopoverTrigger>
        <PopoverContent className="w-80">
          <div className="space-y-2">
            <h4 className="font-semibold">Notifications</h4>
            <p className="text-sm text-muted-foreground">
              You have 3 new notifications. Click to view all.
            </p>
          </div>
        </PopoverContent>
      </Popover>

      <Popover>
        <PopoverTrigger render={<Button variant="ghost" size="icon" />}>
          <UserIcon className="h-5 w-5" />
        </PopoverTrigger>
        <PopoverContent className="w-80">
          <div className="space-y-2">
            <h4 className="font-semibold">Profile</h4>
            <p className="text-sm text-muted-foreground">
              View and edit your profile information.
            </p>
          </div>
        </PopoverContent>
      </Popover>
    </div>
  );
}

Filter

Popover used as a filter dropdown.

View source

import { Button } from '@acronis-platform/shadcn-uikit/react';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@acronis-platform/shadcn-uikit/react';
import { FilterIcon } from '@acronis-platform/shadcn-uikit';
export function PopoverFilter() {
  return (
    <div className="flex justify-center rounded-lg border p-8">
      <Popover>
        <PopoverTrigger render={<Button variant="outline" />}>
          <FilterIcon className="mr-2 h-4 w-4" />
          Filters
        </PopoverTrigger>
        <PopoverContent className="w-80">
          <div className="space-y-4">
            <h4 className="font-semibold">Filter Options</h4>
            <div className="space-y-2">
              <div className="flex items-center space-x-2">
                <input type="checkbox" id="option1" className="h-4 w-4" />
                <label htmlFor="option1" className="text-sm">
                  Show completed items
                </label>
              </div>
              <div className="flex items-center space-x-2">
                <input type="checkbox" id="option2" className="h-4 w-4" />
                <label htmlFor="option2" className="text-sm">
                  Show archived items
                </label>
              </div>
              <div className="flex items-center space-x-2">
                <input type="checkbox" id="option3" className="h-4 w-4" />
                <label htmlFor="option3" className="text-sm">
                  Show deleted items
                </label>
              </div>
            </div>
            <div className="flex justify-end gap-2 pt-2">
              <Button variant="ghost" size="sm">
                Clear
              </Button>
              <Button size="sm">Apply</Button>
            </div>
          </div>
        </PopoverContent>
      </Popover>
    </div>
  );
}

API Reference

PopoverContent

Prop

Type

Edit on GitHub

Popover

On this page