Physics-Driven Gooey UI Component Library – goopUI

goopUI is a Vue and Nuxt UI component library that adds liquid, physics-driven animations to shadcn-style buttons, form controls, menus, dialogs, and other UI components.

It uses a decorative goo layer that responds to pointer input and changes in component state.

Features

• Vue components with shadcn-vue-style APIs, Reka UI primitives, and Tailwind CSS styling.
• Liquid motion for button presses, checkbox selection, menu opening, tab changes, and progress indicators.
• SVG-based goo effects with an optional canvas renderer powered by the shared physics engine.
• 3 animation presets: subtle, playful, and wild.
• Per-component effect controls through Vue props and --goop-* CSS variables.
• Nuxt module for component auto-imports, CSS registration, and Tailwind source detection.
• Static goo shapes in reduced-motion mode, with motion effects disabled.

How to Use goopUI

Clone the repository to try the components in the source playground.

Run the Source Playground

git clone https://github.com/Tmmcmasters/goopui.git
cd goopui
pnpm install
pnpm dev:playground

To run the documentation site locally at http://localhost:3001:

pnpm dev:www

Package Setup

Nuxt

Install the Nuxt module in a Nuxt 4 app with Tailwind CSS and shadcn theme variables:

pnpm add @goopui/nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@goopui/nuxt'],
  goop: { preset: 'subtle' },
})

The module registers components with the Goop prefix and imports their stylesheet:

<template>
  <GoopButton variant="outline">Save changes</GoopButton>
</template>

Vue

Install the Vue package:

pnpm add @goopui/vue

Import the package stylesheet after Tailwind in your CSS entry:

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

<script setup lang="ts">
import { GoopButton } from '@goopui/vue'
</script>
<template>
  <GoopButton preset="playful">Save</GoopButton>
  <GoopButton variant="destructive" :shockwave="false">Delete</GoopButton>
</template>

For app-wide animation defaults, register GoopPlugin in main.ts:

import { createApp } from 'vue'
import { GoopPlugin } from '@goopui/vue'
import App from './App.vue'
createApp(App).use(GoopPlugin, { preset: 'subtle' }).mount('#app')

GoopToaster also requires vue-sonner and its vue-sonner/style.css stylesheet.

Available UI Components

Actions

Forms

Overlays

Navigation

Feedback

Layout

Customize the Goo Effects

Component colors follow shadcn tokens such as --primary, --destructive, and --popover. Set animation presets and --goop-* variables on the root or a component parent.

:root {
  --goop-preset: playful;
}
.settings-panel {
  --goop-preset: subtle;
  --goop-shockwave: 0;
}
.product-hero {
  --goop-preset: wild;
  --goop-drip-size: 9;
}

Nuxt Module Options

Set module options under goop in nuxt.config.ts.

Alternatives and Related Resources

• 360+ Animated UI Components & WebGL Effects for Vue/Nuxt – nxui
• 100+ Beautiful Components for Vue & Nuxt – Inspira UI
• Customizable Vue UI Components with Tailwind CSS – shadcn-vue
• Headless UI Primitives for Vue & Nuxt – Akaza UI