Installation

Add GooUI components to your React project via the shadcn CLI. Each component is published as a standalone registry item.

1

Install GooeyFilter (required)

All gooey components depend on the GooeyFilter SVG primitive. Install it first — it provides the feGaussianBlur + feColorMatrix metaball effect.

npx shadcn@latest add https://gooui.pages.dev/r/gooey-filter.json
2

Install any component

Replace gooey-tabs with gooey-dialog, gooey-button, or gooey-badge. Each component is independent once GooeyFilter is installed.

npx shadcn@latest add https://gooui.pages.dev/r/gooey-tabs.json
3

Import and use

All components are "use client". Import them in your client components and pass your content as props.

import { GooeyTabs } from "@/components/gooey-tabs";

<GooeyTabs
  items={[
    { id: "a", label: "Tab A", content: "..." },
    { id: "b", label: "Tab B", content: "..." },
  ]}
  defaultActiveId="a"
  color="#8b5cf6"
/>

Requirements

  • >Next.js 14+ or any React framework with client components
  • >framer-motion for spring animations
  • >shadcn@latest CLI for registry installation

FAQ

Do I need to install all components?

No. Each component is independent. Install only what you need. GooeyFilter is the only shared dependency.

Can I customize the colors?

Yes. All components accept color props. Use any valid CSS color value.

Does it work with Next.js App Router?

Yes. All components are "use client" and work with Next.js 14+, including the App Router.

Can I use it without shadcn?

Yes. Copy the source files from packages/gooui/src/ directly into your project. The components have no dependency on shadcn infrastructure.

Does it support server-side rendering?

Partially. The components render on the server (static HTML), but interactivity (animations, open/close) requires client-side JavaScript.