# Gooey · Pro

Liquid UI: pieces that touch melt into one another and stretch apart like goo, while text and icons stay perfectly crisp. An SVG filter plus springs, so it works with any markup.

This is a Charcoal UI Pro component. Its source and examples are available with a Pro seat: https://charcoalui.com/pricing

## With a Pro seat

1. Add the registry to components.json:

```json
{
  "registries": {
    "@charcoal": {
      "url": "https://charcoalui.com/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${CHARCOAL_LICENSE_KEY}"
      }
    }
  }
}
```

2. Copy your licence key from https://charcoalui.com/dashboard and put it in .env.local as CHARCOAL_LICENSE_KEY, then:

```bash
npx shadcn@latest add @charcoal/gooey
```

To read Pro source through this MCP server, reconnect it with the header "Authorization: Bearer <licence key>".

## API — Action menu
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `blur` | `number` | `7` | Gooey: how far shapes reach for each other, in px. |
| `contrast` | `number` | `20` | Gooey: edge sharpness of the merged goo. |
| `bounce` | `number` | `0.45` | Gooey: spring bounciness for items. |
| `stagger` | `number` | `0.04` | Gooey: seconds between items. |
| `x / y / scale` | `number` | — | GooeyItem: where the piece springs to. |
| `index` | `number` | `0` | GooeyItem: position in the stagger order. |

See it live: https://charcoalui.com/docs/components/gooey