Tmmcmasters/goopui: Components that drip. Gooey, physics-driven shadcn-style UI components for Vue/Nuxt (React and Svelte planned).

Components that drip. Gooey, physics-driven shadcn-style UI components for Vue/Nuxt (React and Svelte planned). - Tmmcmasters/goopui

Summary

goopUI is a pre-alpha component library that adds gooey, dripping, physics-driven effects to shadcn-style UI primitives for Vue 3 and Nuxt. It currently provides a framework-agnostic animation engine, Vue components, and a Nuxt module, while React and Svelte packages are only planned. The project is useful for engineers who want interactive, fluid interface effects with per-component controls and reduced-motion support.

What it is useful for

The repository includes buttons, switches, checkboxes, radio groups, popovers, dropdown menus, tabs, tooltips, sliders, progress indicators, spinners, and toasters. For example, a product team could use GoopButton for an interactive call-to-action or add gooey pointer-tracking effects to navigation and tool controls without building the animation system from scratch.

Each effect can be toggled independently and configured with subtle, playful, or wild presets. The components also respect prefers-reduced-motion, which is important when motion could be distracting or uncomfortable for users.

The architecture separates the reusable animation engine from framework bindings:

• @goopui/core handles goo rendering through SVG, canvas, or WebGL, fluid and drip physics, pointer tracking, and reduced-motion behavior.
• @goopui/vue provides Vue 3 components built on Reka UI and styled with Tailwind CSS v4 and shadcn tokens.
• @goopui/nuxt provides auto-imports, CSS, Tailwind source configuration, and global defaults.
• React and Svelte packages are not yet available.

A documented limitation is that the project is pre-alpha and nothing has been published to npm. The Nuxt integration example is therefore explicitly marked for use “once published,” rather than being a current installation path.

How engineers can use it

For local development, the README requires Node 24 and pnpm 12. Engineers can install the workspace and build the library packages with:

pnpm install

They can then explore the components in the playground:

pnpm dev:playground

The documentation site runs separately on port 3001:

pnpm dev:www

The README also documents pnpm build, pnpm typecheck, and pnpm test for validating changes.

The intended Nuxt configuration, after publication, is:

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

Components can then be used as auto-imported Vue templates:

<template>
  <GoopButton>Poke me</GoopButton>
</template>

Until npm publication, teams should evaluate the library through the local playground or contribute directly to the repository; the README does not document a published-package installation procedure.