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
