Button

<GoopButton>Save changes</GoopButton>

Installation#

Nuxt#

pnpm add @goopui/nuxt

export default defineNuxtConfig({
  modules: ['@goopui/nuxt'],
})

The module auto-imports GoopButton, adds goop.css, and points Tailwind at the component classes. It needs Tailwind CSS v4 and the shadcn tokens (--primary, --secondary, --destructive, --border, --input, --background, --muted, --ring, --radius).

Vue#

pnpm add @goopui/vue

@import "tailwindcss";
@import "@goopui/vue/goop.css";

import { createApp } from 'vue'
import { GoopPlugin } from '@goopui/vue'
import App from './App.vue'

createApp(App)
  .use(GoopPlugin, { preset: 'playful' }) // optional: app-wide defaults
  .mount('#app')

Usage#

<script setup lang="ts">
// Nuxt auto-imports this. In plain Vue, import it:
import { GoopButton } from '@goopui/vue'
</script>

<template>
  <GoopButton>Save</GoopButton>
  <GoopButton variant="destructive">Delete</GoopButton>
</template>

Variants#

The same variants as shadcn. The goo takes each variant's color: solid for default and secondary, a true tint for destructive, a 1px goo stroke for outline, and hover-only goo for ghost. Link has no goo, since a text link has no surface to drip from.

<GoopButton>Default</GoopButton>
<GoopButton variant="secondary">Secondary</GoopButton>
<GoopButton variant="destructive">Destructive</GoopButton>
<GoopButton variant="outline">Outline</GoopButton>
<GoopButton variant="ghost">Ghost</GoopButton>
<GoopButton variant="link">Link</GoopButton>

Behavior#

• Hover spawns drips off the bottom edge. They swell and neck. If you keep hovering they detach, fall, shrink, and fade; if the pointer leaves first, they get pulled back up. Resting the pointer keeps a slow drip going (--goop-drip-interval).
• Reach. Before the pointer even arrives, one to three lumps swell out of the edge toward it (--goop-reach, --goop-reach-globs, --goop-reach-size). Come in slowly from below to see them.
• Speed matters. A fast entry spawns more drips in a tighter cluster, and a fast hit (past --goop-splash-min-speed) fires a click-like shockwave aimed along the motion (--goop-hit-effect).
• Momentum. The body leans and wobbles with the pointer, hanging drips swing with its acceleration (--goop-inertia) and creep along the edge toward the cursor (--goop-flow-to-cursor), and fast page scrolls make them slosh (--goop-scroll-slosh).
• Taffy. Press and drag off the button to pull a stretchy string of goo, with a couple of extra strands, until it snaps (--goop-taffy, --goop-taffy-length, --goop-taffy-strands). On touch it starts after a long press, so scrolling still works.
• Label ride. The label moves and squishes with the body; transforms only, so the text stays sharp (--goop-label-ride).
• Click squishes the body, then on release adds goo (it swells and drips faster) and fires a shockwave from the click point. Space and Enter do the same from the top.
• Touch gives a squish, a drip, and a shockwave per tap. Hover drips only run on devices with a real hover.
• Layout never changes. Drips and particles draw in an absolutely positioned overlay with pointer-events: none.

Sizes and shapes#

The sizes are shadcn's. The goo follows the element's own box and border-radius, so a pill is just rounded-full:

<GoopButton size="xs">Extra small</GoopButton>
<GoopButton size="sm">Small</GoopButton>
<GoopButton>Default</GoopButton>
<GoopButton size="lg">Large</GoopButton>
<GoopButton size="icon" aria-label="Next"><ArrowRight /></GoopButton>
<GoopButton class="rounded-full">Pill</GoopButton>

As a link#

asChild renders your element instead of a <button>, with the same classes and goo. Use it with NuxtLink (or RouterLink):

<GoopButton as-child>
  <NuxtLink to="/docs/getting-started/installation">Installation guide</NuxtLink>
</GoopButton>

Presets#

subtle, playful (default), and wild set every feature at once. Use subtle in dense UIs, wild for a hero CTA:

<GoopButton preset="subtle">Save</GoopButton>
<GoopButton preset="wild">Get started</GoopButton>

Or from CSS: --goop-preset: wild. The Theming page lists everything each preset changes. To try them on these buttons, use the tuner there.

Feature toggles#

Every engine feature is a prop. A boolean switches it off (false) or on at the preset's strength (true), and a number tunes it. Leave it out and the CSS vars and the preset decide.

<GoopButton :shockwave="false" taffy>Taffy, no shockwave</GoopButton>
<GoopButton gloss reach>Gloss and reach</GoopButton>
<GoopButton preset="wild" variant="secondary">Wild</GoopButton>
<GoopButton preset="subtle" variant="outline">Subtle</GoopButton>
<GoopButton :drip-size="12" :inertia="0.4">Tuned with numbers</GoopButton>

For anything not covered by a prop, the goop prop takes a whole options object, and explicit props win over it:

<GoopButton :goop="{ splash: 'escape', restingDrips: [0.3, 0.7] }">Escape artist</GoopButton>

Resting drips#

restingDrips hangs still drips off the edge, and they breathe very slowly (--goop-idle). Give it a count, or place them as fractions of the width, or as { x, size, length } objects for an organic, uneven edge. They're also what's left in reduced-motion mode:

<GoopButton :resting-drips="1">One drip</GoopButton>
<GoopButton variant="destructive" :resting-drips="2">Two drips</GoopButton>
<GoopButton class="rounded-full" :resting-drips="[0.2, 0.32, 0.8]" :drip-length="20">
  Placed: 0.2, 0.32, 0.8
</GoopButton>

Oil finish#

finish="oil" (or --goop-finish: oil) gives the goo a thin-film sheen. It works on any color, and is strongest on dark ink:

<GoopButton
  size="lg"
  finish="oil"
  :oil-intensity="0.6"
  class="bg-neutral-950 text-white [--goop-color:var(--color-neutral-950)]"
>
  Crude oil
</GoopButton>
<GoopButton size="lg" variant="destructive" finish="oil">Oil on red</GoopButton>

Disabled and drip-free#

A disabled button ignores the pointer. Drips already running finish, and nothing new starts. :drips="false" keeps the press squish, and :goo="false" renders a plain shadcn Button:

<GoopButton disabled>Disabled</GoopButton>
<GoopButton :drips="false">No drips, squish only</GoopButton>
<GoopButton :goo="false" variant="outline">Plain shadcn (goo off)</GoopButton>

Driving it from code#

GoopButton exposes the engine handle and its methods, so you can drip or splash it from a script, like the Drip button under the demos above does:

<script setup lang="ts">
const btn = useTemplateRef('btn')
</script>

<template>
  <GoopButton ref="btn" :time-scale="0.3">Slow</GoopButton>
  <button @click="btn?.drip()">Drip it</button>
</template>

It exposes handle, el, refresh(), press(), release(), hover(on, x?), drip(x?), addGoop(), shockwave(), splashThrough(), feedPointer(), and inspect(). After changing --goop-* vars on an ancestor, call refresh() so the button re-reads them.

Props#

GoopButton keeps the shadcn-vue Button API and adds the goo props.

Engine props#

Every engine option is a prop, in camelCase (dripSize becomes :drip-size). This table is generated from the engine's own metadata, so it always matches the version of the docs you're reading. Each prop is also a --goop-* CSS variable. Precedence, high to low: prop, then the goop object, then CSS var, then preset, then default.

Accessibility#

It's a real <button> (or your asChild element). The goo layer is aria-hidden and can't be clicked, the label is never filtered, and your focus ring isn't covered. Space and Enter get the same squish and shockwave as a click. Under reduced motion the shape and resting drips stay; drips, squish, momentum, reach, taffy, splashes, and shockwaves turn off, and an oil sheen holds still. See Accessibility & reduced motion.