Components that drip.

goopUI is a goopy mirror of the shadcn catalog: the same accessible primitives and the same API, with gooey, dripping, physics-driven effects layered on top. Poke a few at goop.timmcmasters.work.

Status: pre-alpha. Nothing is on npm yet. Vue (and Nuxt) come first; React and Svelte follow once the Vue API settles.

Components

Button, Spinner, Switch, Checkbox, RadioGroup, Popover, DropdownMenu, Tabs, Tooltip, Slider, Progress, Toaster. More are on the way (Dialog, Sheet, Drawer, Accordion, Input, Select, Toggle).

Every effect is individually toggleable, comes with subtle | playful | wild presets, and respects prefers-reduced-motion.

Packages

Package	What it is	Status
@goopui/core	Framework-agnostic engine: goo rendering (SVG / canvas / WebGL), drip and fluid physics, pointer tracking, reduced-motion handling	pre-alpha
@goopui/vue	Vue 3 components on reka-ui, styled with Tailwind v4 + shadcn tokens	pre-alpha
@goopui/nuxt	Nuxt module: auto-imports, CSS, Tailwind @source, global defaults	pre-alpha
@goopui/react	React components	planned
@goopui/svelte	Svelte components	planned

Usage (Nuxt, once published)

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

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

Development

Requires Node 24 (see .nvmrc) and pnpm 12.

pnpm install          # also builds the library packages
pnpm dev:playground   # component playground
pnpm dev:www          # docs site at http://localhost:3001
pnpm build
pnpm typecheck
pnpm test

The repo layout and the architecture rules are in CONTRIBUTING.md.

Contributing

Issues and PRs are welcome. Please read CONTRIBUTING.md and the Code of Conduct first. To report a security issue, see SECURITY.md.

License

MIT © Timothy McMasters