# PopoverArrow

> `PopoverArrow` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`.

Source: https://ui.jcsoftdev.com/docs/components/popover-arrow

`PopoverArrow` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`.

## Import

```ts
import { PopoverArrow } from "@jcsoftdev/ui/overlays";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/overlays/popover`.

## Usage

```tsx
export const Default: Story = {
  render: (args) => (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="secondary">Ver cliente</Button>
      </PopoverTrigger>
      <PopoverContent {...args}>
        <ClientCard />
      </PopoverContent>
    </Popover>
  ),
};
```

_Source of the Storybook story._

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `width` | `number` |  | Length of the base along the content edge, in px. |
| `height` | `number` |  | Protrusion from the content edge, in px; it is added to `sideOffset`. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/overlays-popover--default)
- [Open By Default](/storybook/?path=/story/overlays-popover--open-by-default)
- [Top End](/storybook/?path=/story/overlays-popover--top-end)
- [Anchored To Element](/storybook/?path=/story/overlays-popover--anchored-to-element)

## Source

`packages/ui/src/overlays/popover/popover.tsx`