# Morph Popover
URL: /docs/web/components/morph-popover

Morph Popover component with multiple variants and sizes.

**Demo:**

```tsx
'use client';
// @custom-demo

import { Sparkles } from 'lucide-react';

import { MorphPopover } from '@docyrus/ui/components/morph-popover';

export function MorphPopoverDemo() {
  return (
    <div className="flex min-h-90 items-center justify-center bg-background p-8">
      
    </div>
  );
}
```

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/ui-morph-popover
```

**Dependencies:**
- [gsap](https://www.npmjs.com/package/gsap)

## Usage

```tsx
import {
  MorphPopover
} from "@docyrus/ui/components/morph-popover";

<MorphPopover
  trigger={...}
  triggerSize={DEFAULT_TRIGGER_SIZE}
  triggerWidth={0}
  triggerHeight={0}
  triggerRadius={0}
  triggerClassName="..."
  isOpen
  onOpenChange={() => {}}
  side="top"
  sideOffset={DEFAULT_SIDE_OFFSET}
  contentWidth={DEFAULT_CONTENT_WIDTH}
  speed={DEFAULT_SPEED}
  bgClassName="..."
  contentClassName="..."
/>
```

## API Reference

| Prop | Type | Default |
|------|------|---------|
| `trigger` | `ReactNode` | — |
| `triggerSize` | `number` | `DEFAULT_TRIGGER_SIZE` |
| `triggerWidth` | `number` | — |
| `triggerHeight` | `number` | — |
| `triggerRadius` | `number` | — |
| `triggerClassName` | `string` | — |
| `disabled` | `boolean` | `false` |
| `isOpen` | `boolean` | — |
| `onOpenChange` | `(open: boolean) => void` | — |
| `side` | `'top' \| 'bottom'` | `'top'` |
| `sideOffset` | `number` | `DEFAULT_SIDE_OFFSET` |
| `contentWidth` | `number` | `DEFAULT_CONTENT_WIDTH` |
| `speed` | `number` | `DEFAULT_SPEED` |
| `bgClassName` | `string` | — |
| `contentClassName` | `string` | — |
| `className` | `string` | — |