Popover

'use client';

import * as Popover from '@components/caprice-ui/popover';

function ArrowSvg(props: React.ComponentProps<'svg'>) {
  return (
    <svg fill="none" height="10" viewBox="0 0 20 10" width="20" {...props}>
      <title>Arrow</title>
      <path
        className="fill-[canvas]"
        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
      />
      <path
        className="fill-gray-200 dark:fill-none"
        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
      />
      <path
        className="dark:fill-gray-300"
        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
      />
    </svg>
  );
}

function BellIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg fill="currentcolor" height="20" viewBox="0 0 16 16" width="20" {...props}>
      <title>Bell</title>
      <path d="M 8 1 C 7.453125 1 7 1.453125 7 2 L 7 3.140625 C 5.28125 3.589844 4 5.144531 4 7 L 4 10.984375 C 4 10.984375 3.984375 11.261719 3.851563 11.519531 C 3.71875 11.78125 3.558594 12 3 12 L 3 13 L 13 13 L 13 12 C 12.40625 12 12.253906 11.78125 12.128906 11.53125 C 12.003906 11.277344 12 11.003906 12 11.003906 L 12 7 C 12 5.144531 10.71875 3.589844 9 3.140625 L 9 2 C 9 1.453125 8.546875 1 8 1 Z M 8 13 C 7.449219 13 7 13.449219 7 14 C 7 14.550781 7.449219 15 8 15 C 8.550781 15 9 14.550781 9 14 C 9 13.449219 8.550781 13 8 13 Z M 8 4 C 9.664063 4 11 5.335938 11 7 L 11 10.996094 C 11 10.996094 10.988281 11.472656 11.234375 11.96875 C 11.238281 11.980469 11.246094 11.988281 11.25 12 L 4.726563 12 C 4.730469 11.992188 4.738281 11.984375 4.742188 11.980469 C 4.992188 11.488281 5 11.015625 5 11.015625 L 5 7 C 5 5.335938 6.335938 4 8 4 Z" />
    </svg>
  );
}

export default function PopoverDemo() {
  return (
    <Popover.Root>
      <Popover.Trigger className="flex size-10 select-none items-center justify-center rounded-md border border-gray-200 bg-gray-50 text-gray-900 hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1 active:bg-gray-100 data-[popup-open]:bg-gray-100">
        <BellIcon aria-label="Notifications" />
      </Popover.Trigger>
      <Popover.Portal>
        <Popover.Positioner sideOffset={8}>
          <Popover.Popup className="origin-[var(--transform-origin)] rounded-lg bg-[canvas] px-6 py-4 text-gray-900 shadow-gray-200 shadow-lg outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[starting-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:shadow-none dark:outline-gray-300 dark:-outline-offset-1">
            <Popover.Arrow className="data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=top]:bottom-[-8px] data-[side=right]:left-[-13px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180">
              <ArrowSvg />
            </Popover.Arrow>
            <Popover.Title className="font-medium text-base">Notifications</Popover.Title>
            <Popover.Description className="text-base text-gray-600">
              You are all caught up. Good job!
            </Popover.Description>
          </Popover.Popup>
        </Popover.Positioner>
      </Popover.Portal>
    </Popover.Root>
  );
}

Installation

npx shadcn@latest add @caprice/popover

npx shadcn@latest add @caprice/popover

npm install @caprice-ui/react

npm install @caprice-ui/react

Install the following dependencies:

npm install @base-ui/react lucide-react

npm install @base-ui/react lucide-react

Add a cn helper

import { defineConfig, type VariantProps } from 'cva';
import { twMerge } from 'tailwind-merge';

export const {
  compose,
  cva,
  cx: cn,
} = defineConfig({
  hooks: {
    onComplete: (className: string) => twMerge(className),
  },
});

export type { VariantProps };

import { defineConfig, type VariantProps } from 'cva';import { twMerge } from 'tailwind-merge';export const {  compose,  cva,  cx: cn,} = defineConfig({  hooks: {    onComplete: (className: string) => twMerge(className),  },});export type { VariantProps };

Copy and paste the following code into your project.

import { Popover } from '@base-ui/react/popover';

/**
 * Groups all parts of the popover.
 * Doesn’t render its own HTML element.
 *
 * Documentation: [Caprice UI Popover](https://caprice-ui.com/docs/components/popover)
 *
 * API Reference: [Base UI Popover](https://base-ui.com/react/components/popover#root)
 */
export namespace Root {
  export type State = Popover.Root.State;
  export type Props = React.ComponentProps<typeof Popover.Root>;
  export type Actions = Popover.Root.Actions;
  export type ChangeEventDetails = Popover.Root.ChangeEventDetails;
  export type ChangeEventReason = Popover.Root.ChangeEventReason;
}

export function Root({ ...props }: Root.Props) {
  return <Popover.Root data-slot="popover" {...props} />;
}

/**
 * A button that opens the popover.
 * Renders a `<button>` element.
 *
 * Documentation: [Caprice UI Popover](https://caprice-ui.com/docs/components/popover)
 *
 * API Reference: [Base UI Popover](https://base-ui.com/react/components/popover#trigger)
 */
export namespace Trigger {
  export type State = Popover.Trigger.State;
  export type Props = React.ComponentProps<typeof Popover.Trigger>;
}

export function Trigger({ ...props }: Trigger.Props) {
  return <Popover.Trigger data-slot="popover-trigger" {...props} />;
}

/**
 * An overlay displayed beneath the popover.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Popover](https://caprice-ui.com/docs/components/popover)
 *
 * API Reference: [Base UI Popover](https://base-ui.com/react/components/popover#backdrop)
 */
export namespace Backdrop {
  export type State = Popover.Backdrop.State;
  export type Props = React.ComponentProps<typeof Popover.Backdrop>;
}

export function Backdrop({ ...props }: Backdrop.Props) {
  return <Popover.Backdrop data-slot="popover-backdrop" {...props} />;
}

/**
 * A portal element that moves the popup to a different part of the DOM.
 * By default, the portal element is appended to `<body>`.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Popover](https://caprice-ui.com/docs/components/popover)
 *
 * API Reference: [Base UI Popover](https://base-ui.com/react/components/popover#portal)
 */
export namespace Portal {
  export interface State extends Popover.Portal.State {}
  export type Props = React.ComponentProps<typeof Popover.Portal>;
}

export function Portal({ ...props }: Portal.Props) {
  return <Popover.Portal data-slot="popover-portal" {...props} />;
}

/**
 * Positions the popover against the trigger.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Popover](https://caprice-ui.com/docs/components/popover)
 *
 * API Reference: [Base UI Popover](https://base-ui.com/react/components/popover#positioner)
 */
export namespace Positioner {
  export type State = Popover.Positioner.State;
  export type Props = React.ComponentProps<typeof Popover.Positioner>;
}

export function Positioner({ ...props }: Positioner.Props) {
  return <Popover.Positioner data-slot="popover-positioner" {...props} />;
}

/**
 * A container for the popover contents.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Popover](https://caprice-ui.com/docs/components/popover)
 *
 * API Reference: [Base UI Popover](https://base-ui.com/react/components/popover#popup)
 */
export namespace Popup {
  export type State = Popover.Popup.State;
  export type Props = React.ComponentProps<typeof Popover.Popup>;
}

export function Popup({ ...props }: Popup.Props) {
  return <Popover.Popup data-slot="popover-popup" {...props} />;
}

/**
 * Displays an element positioned against the popover anchor.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Popover](https://caprice-ui.com/docs/components/popover)
 *
 * API Reference: [Base UI Popover](https://base-ui.com/react/components/popover#arrow)
 */
export namespace Arrow {
  export type State = Popover.Arrow.State;
  export type Props = React.ComponentProps<typeof Popover.Arrow>;
}

export function Arrow({ ...props }: Arrow.Props) {
  return <Popover.Arrow data-slot="popover-arrow" {...props} />;
}

/**
 * A heading that labels the popover.
 * Renders an `<h2>` element.
 *
 * Documentation: [Caprice UI Popover](https://caprice-ui.com/docs/components/popover)
 *
 * API Reference: [Base UI Popover](https://base-ui.com/react/components/popover#title)
 */
export namespace Title {
  export type State = Popover.Title.State;
  export type Props = React.ComponentProps<typeof Popover.Title>;
}

export function Title({ ...props }: Title.Props) {
  return <Popover.Title data-slot="popover-title" {...props} />;
}

/**
 * A paragraph with additional information about the popover.
 * Renders a `<p>` element.
 *
 * Documentation: [Caprice UI Popover](https://caprice-ui.com/docs/components/popover)
 *
 * API Reference: [Base UI Popover](https://base-ui.com/react/components/popover#description)
 */
export namespace Description {
  export type State = Popover.Description.State;
  export type Props = React.ComponentProps<typeof Popover.Description>;
}

export function Description({ ...props }: Description.Props) {
  return <Popover.Description data-slot="popover-description" {...props} />;
}

/**
 * A button that closes the popover.
 * Renders a `<button>` element.
 *
 * Documentation: [Caprice UI Popover](https://caprice-ui.com/docs/components/popover)
 *
 * API Reference: [Base UI Popover](https://base-ui.com/react/components/popover#close)
 */
export namespace Close {
  export type State = Popover.Close.State;
  export type Props = React.ComponentProps<typeof Popover.Close>;
}

export function Close({ ...props }: Close.Props) {
  return <Popover.Close data-slot="popover-close" {...props} />;
}

import { Popover } from '@base-ui/react/popover';/** * Groups all parts of the popover. * Doesn’t render its own HTML element. * * Documentation: [Caprice UI Popover](https://caprice-ui.com/docs/components/popover) * * API Reference: [Base UI Popover](https://base-ui.com/react/components/popover#root) */export namespace Root {  export type State = Popover.Root.State;  export type Props = React.ComponentProps<typeof Popover.Root>;  export type Actions = Popover.Root.Actions;  export type ChangeEventDetails = Popover.Root.ChangeEventDetails;  export type ChangeEventReason = Popover.Root.ChangeEventReason;}export function Root({ ...props }: Root.Props) {  return <Popover.Root data-slot="popover" {...props} />;}/** * A button that opens the popover. * Renders a `<button>` element. * * Documentation: [Caprice UI Popover](https://caprice-ui.com/docs/components/popover) * * API Reference: [Base UI Popover](https://base-ui.com/react/components/popover#trigger) */export namespace Trigger {  export type State = Popover.Trigger.State;  export type Props = React.ComponentProps<typeof Popover.Trigger>;}export function Trigger({ ...props }: Trigger.Props) {  return <Popover.Trigger data-slot="popover-trigger" {...props} />;}/** * An overlay displayed beneath the popover. * Renders a `<div>` element. * * Documentation: [Caprice UI Popover](https://caprice-ui.com/docs/components/popover) * * API Reference: [Base UI Popover](https://base-ui.com/react/components/popover#backdrop) */export namespace Backdrop {  export type State = Popover.Backdrop.State;  export type Props = React.ComponentProps<typeof Popover.Backdrop>;}export function Backdrop({ ...props }: Backdrop.Props) {  return <Popover.Backdrop data-slot="popover-backdrop" {...props} />;}/** * A portal element that moves the popup to a different part of the DOM. * By default, the portal element is appended to `<body>`. * Renders a `<div>` element. * * Documentation: [Caprice UI Popover](https://caprice-ui.com/docs/components/popover) * * API Reference: [Base UI Popover](https://base-ui.com/react/components/popover#portal) */export namespace Portal {  export interface State extends Popover.Portal.State {}  export type Props = React.ComponentProps<typeof Popover.Portal>;}export function Portal({ ...props }: Portal.Props) {  return <Popover.Portal data-slot="popover-portal" {...props} />;}/** * Positions the popover against the trigger. * Renders a `<div>` element. * * Documentation: [Caprice UI Popover](https://caprice-ui.com/docs/components/popover) * * API Reference: [Base UI Popover](https://base-ui.com/react/components/popover#positioner) */export namespace Positioner {  export type State = Popover.Positioner.State;  export type Props = React.ComponentProps<typeof Popover.Positioner>;}export function Positioner({ ...props }: Positioner.Props) {  return <Popover.Positioner data-slot="popover-positioner" {...props} />;}/** * A container for the popover contents. * Renders a `<div>` element. * * Documentation: [Caprice UI Popover](https://caprice-ui.com/docs/components/popover) * * API Reference: [Base UI Popover](https://base-ui.com/react/components/popover#popup) */export namespace Popup {  export type State = Popover.Popup.State;  export type Props = React.ComponentProps<typeof Popover.Popup>;}export function Popup({ ...props }: Popup.Props) {  return <Popover.Popup data-slot="popover-popup" {...props} />;}/** * Displays an element positioned against the popover anchor. * Renders a `<div>` element. * * Documentation: [Caprice UI Popover](https://caprice-ui.com/docs/components/popover) * * API Reference: [Base UI Popover](https://base-ui.com/react/components/popover#arrow) */export namespace Arrow {  export type State = Popover.Arrow.State;  export type Props = React.ComponentProps<typeof Popover.Arrow>;}export function Arrow({ ...props }: Arrow.Props) {  return <Popover.Arrow data-slot="popover-arrow" {...props} />;}/** * A heading that labels the popover. * Renders an `<h2>` element. * * Documentation: [Caprice UI Popover](https://caprice-ui.com/docs/components/popover) * * API Reference: [Base UI Popover](https://base-ui.com/react/components/popover#title) */export namespace Title {  export type State = Popover.Title.State;  export type Props = React.ComponentProps<typeof Popover.Title>;}export function Title({ ...props }: Title.Props) {  return <Popover.Title data-slot="popover-title" {...props} />;}/** * A paragraph with additional information about the popover. * Renders a `<p>` element. * * Documentation: [Caprice UI Popover](https://caprice-ui.com/docs/components/popover) * * API Reference: [Base UI Popover](https://base-ui.com/react/components/popover#description) */export namespace Description {  export type State = Popover.Description.State;  export type Props = React.ComponentProps<typeof Popover.Description>;}export function Description({ ...props }: Description.Props) {  return <Popover.Description data-slot="popover-description" {...props} />;}/** * A button that closes the popover. * Renders a `<button>` element. * * Documentation: [Caprice UI Popover](https://caprice-ui.com/docs/components/popover) * * API Reference: [Base UI Popover](https://base-ui.com/react/components/popover#close) */export namespace Close {  export type State = Popover.Close.State;  export type Props = React.ComponentProps<typeof Popover.Close>;}export function Close({ ...props }: Close.Props) {  return <Popover.Close data-slot="popover-close" {...props} />;}

Update the import paths to match your project setup.

Usage

import * as Popover from "@/components/caprice-ui/popover"

import * as Popover from "@/components/caprice-ui/popover"

import * as Popover from "@caprice-ui/react/popover"

import * as Popover from "@caprice-ui/react/popover"

'use client'; import * as Popover from '@components/caprice-ui/popover'; function ArrowSvg(props: React.ComponentProps<'svg'>) { return ( <svg fill="none" height="10" viewBox="0 0 20 10" width="20" {...props}> <title>Arrow</title> <path className="fill-[canvas]" d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z" /> <path className="fill-gray-200 dark:fill-none" d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z" /> <path className="dark:fill-gray-300" d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z" /> </svg> ); } function BellIcon(props: React.ComponentProps<'svg'>) { return ( <svg fill="currentcolor" height="20" viewBox="0 0 16 16" width="20" {...props}> <title>Bell</title> <path d="M 8 1 C 7.453125 1 7 1.453125 7 2 L 7 3.140625 C 5.28125 3.589844 4 5.144531 4 7 L 4 10.984375 C 4 10.984375 3.984375 11.261719 3.851563 11.519531 C 3.71875 11.78125 3.558594 12 3 12 L 3 13 L 13 13 L 13 12 C 12.40625 12 12.253906 11.78125 12.128906 11.53125 C 12.003906 11.277344 12 11.003906 12 11.003906 L 12 7 C 12 5.144531 10.71875 3.589844 9 3.140625 L 9 2 C 9 1.453125 8.546875 1 8 1 Z M 8 13 C 7.449219 13 7 13.449219 7 14 C 7 14.550781 7.449219 15 8 15 C 8.550781 15 9 14.550781 9 14 C 9 13.449219 8.550781 13 8 13 Z M 8 4 C 9.664063 4 11 5.335938 11 7 L 11 10.996094 C 11 10.996094 10.988281 11.472656 11.234375 11.96875 C 11.238281 11.980469 11.246094 11.988281 11.25 12 L 4.726563 12 C 4.730469 11.992188 4.738281 11.984375 4.742188 11.980469 C 4.992188 11.488281 5 11.015625 5 11.015625 L 5 7 C 5 5.335938 6.335938 4 8 4 Z" /> </svg> ); } export default function PopoverDemo() { return ( <Popover.Root> <Popover.Trigger className="flex size-10 select-none items-center justify-center rounded-md border border-gray-200 bg-gray-50 text-gray-900 hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-blue-800 focus-visible:-outline-offset-1 active:bg-gray-100 data-[popup-open]:bg-gray-100"> <BellIcon aria-label="Notifications" /> </Popover.Trigger> <Popover.Portal> <Popover.Positioner sideOffset={8}> <Popover.Popup className="origin-[var(--transform-origin)] rounded-lg bg-[canvas] px-6 py-4 text-gray-900 shadow-gray-200 shadow-lg outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[starting-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:shadow-none dark:outline-gray-300 dark:-outline-offset-1"> <Popover.Arrow className="data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=top]:bottom-[-8px] data-[side=right]:left-[-13px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180"> <ArrowSvg /> </Popover.Arrow> <Popover.Title className="font-medium text-base">Notifications</Popover.Title> <Popover.Description className="text-base text-gray-600"> You are all caught up. Good job! </Popover.Description> </Popover.Popup> </Popover.Positioner> </Popover.Portal> </Popover.Root> ); }

import { Popover } from '@base-ui/react/popover'; /** * Groups all parts of the popover. * Doesn’t render its own HTML element. * * Documentation: [Caprice UI Popover](https://caprice-ui.com/docs/components/popover) * * API Reference: [Base UI Popover](https://base-ui.com/react/components/popover#root) */ export namespace Root { export type State = Popover.Root.State; export type Props = React.ComponentProps<typeof Popover.Root>; export type Actions = Popover.Root.Actions; export type ChangeEventDetails = Popover.Root.ChangeEventDetails; export type ChangeEventReason = Popover.Root.ChangeEventReason; } export function Root({ ...props }: Root.Props) { return <Popover.Root data-slot="popover" {...props} />; } /** * A button that opens the popover. * Renders a `<button>` element. * * Documentation: [Caprice UI Popover](https://caprice-ui.com/docs/components/popover) * * API Reference: [Base UI Popover](https://base-ui.com/react/components/popover#trigger) */ export namespace Trigger { export type State = Popover.Trigger.State; export type Props = React.ComponentProps<typeof Popover.Trigger>; } export function Trigger({ ...props }: Trigger.Props) { return <Popover.Trigger data-slot="popover-trigger" {...props} />; } /** * An overlay displayed beneath the popover. * Renders a `<div>` element. * * Documentation: [Caprice UI Popover](https://caprice-ui.com/docs/components/popover) * * API Reference: [Base UI Popover](https://base-ui.com/react/components/popover#backdrop) */ export namespace Backdrop { export type State = Popover.Backdrop.State; export type Props = React.ComponentProps<typeof Popover.Backdrop>; } export function Backdrop({ ...props }: Backdrop.Props) { return <Popover.Backdrop data-slot="popover-backdrop" {...props} />; } /** * A portal element that moves the popup to a different part of the DOM. * By default, the portal element is appended to `<body>`. * Renders a `<div>` element. * * Documentation: [Caprice UI Popover](https://caprice-ui.com/docs/components/popover) * * API Reference: [Base UI Popover](https://base-ui.com/react/components/popover#portal) */ export namespace Portal { export interface State extends Popover.Portal.State {} export type Props = React.ComponentProps<typeof Popover.Portal>; } export function Portal({ ...props }: Portal.Props) { return <Popover.Portal data-slot="popover-portal" {...props} />; } /** * Positions the popover against the trigger. * Renders a `<div>` element. * * Documentation: [Caprice UI Popover](https://caprice-ui.com/docs/components/popover) * * API Reference: [Base UI Popover](https://base-ui.com/react/components/popover#positioner) */ export namespace Positioner { export type State = Popover.Positioner.State; export type Props = React.ComponentProps<typeof Popover.Positioner>; } export function Positioner({ ...props }: Positioner.Props) { return <Popover.Positioner data-slot="popover-positioner" {...props} />; } /** * A container for the popover contents. * Renders a `<div>` element. * * Documentation: [Caprice UI Popover](https://caprice-ui.com/docs/components/popover) * * API Reference: [Base UI Popover](https://base-ui.com/react/components/popover#popup) */ export namespace Popup { export type State = Popover.Popup.State; export type Props = React.ComponentProps<typeof Popover.Popup>; } export function Popup({ ...props }: Popup.Props) { return <Popover.Popup data-slot="popover-popup" {...props} />; } /** * Displays an element positioned against the popover anchor. * Renders a `<div>` element. * * Documentation: [Caprice UI Popover](https://caprice-ui.com/docs/components/popover) * * API Reference: [Base UI Popover](https://base-ui.com/react/components/popover#arrow) */ export namespace Arrow { export type State = Popover.Arrow.State; export type Props = React.ComponentProps<typeof Popover.Arrow>; } export function Arrow({ ...props }: Arrow.Props) { return <Popover.Arrow data-slot="popover-arrow" {...props} />; } /** * A heading that labels the popover. * Renders an `<h2>` element. * * Documentation: [Caprice UI Popover](https://caprice-ui.com/docs/components/popover) * * API Reference: [Base UI Popover](https://base-ui.com/react/components/popover#title) */ export namespace Title { export type State = Popover.Title.State; export type Props = React.ComponentProps<typeof Popover.Title>; } export function Title({ ...props }: Title.Props) { return <Popover.Title data-slot="popover-title" {...props} />; } /** * A paragraph with additional information about the popover. * Renders a `<p>` element. * * Documentation: [Caprice UI Popover](https://caprice-ui.com/docs/components/popover) * * API Reference: [Base UI Popover](https://base-ui.com/react/components/popover#description) */ export namespace Description { export type State = Popover.Description.State; export type Props = React.ComponentProps<typeof Popover.Description>; } export function Description({ ...props }: Description.Props) { return <Popover.Description data-slot="popover-description" {...props} />; } /** * A button that closes the popover. * Renders a `<button>` element. * * Documentation: [Caprice UI Popover](https://caprice-ui.com/docs/components/popover) * * API Reference: [Base UI Popover](https://base-ui.com/react/components/popover#close) */ export namespace Close { export type State = Popover.Close.State; export type Props = React.ComponentProps<typeof Popover.Close>; } export function Close({ ...props }: Close.Props) { return <Popover.Close data-slot="popover-close" {...props} />; }

Installation

Install the following dependencies:

Add a cn helper

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage

Examples

API Reference

On this page

Contribute