3 variants

Gooey

Stretchy controls. A menu whose actions pop out, tabs whose highlight stretches between options, and pagination dots that stretch to the next one.

Gooey menu

The actions pop out one after another on a soft spring, and fold back in the other order.

usage.tsx

import { GooeyMenu } from "@/components/registry/gooey-menu";

export function Create() {
  return (
    <GooeyMenu
      actions={[
        { label: "New document", icon: <FileText />, onSelect: newDocument },
        { label: "Upload", icon: <Upload />, onSelect: upload },
      ]}
    />
  );
}

"use client";

import { Plus } from "lucide-react";
import { motion, useReducedMotion } from "motion/react";
import { type KeyboardEvent, type ReactNode, useEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils";

export interface GooeyAction {
  label: string;
  icon: ReactNode;
  onSelect?: () => void;
}

86 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/gooey-menu

Tabs

A segmented control whose highlight stretches on its way to the chosen tab, then settles into a pill.

usage.tsx

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

export function Billing() {
  return (
    <GooeyTabs
      label="Billing period"
      tabs={["Monthly", "Yearly", "Lifetime"]}
      onValueChange={setPeriod}
    />
  );
}

"use client";

import { animate, motion, useMotionTemplate, useMotionValue, useReducedMotion, useTransform } from "motion/react";
import { type KeyboardEvent, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils";

export interface GooeyTabsProps {
  tabs: string[];
  /** The selected tab. Leave unset to let the control manage itself. */
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;

120 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/gooey-tabs

Dots

Pagination dots where the active dot stretches over to the next one. Arrow keys move it.

usage.tsx

import { GooeyDots } from "@/components/registry/gooey-dots";

export function Pager({ slide, setSlide }) {
  return <GooeyDots count={5} value={slide} onValueChange={setSlide} />;
}

"use client";

import { animate, motion, useMotionTemplate, useMotionValue, useReducedMotion, useTransform } from "motion/react";
import { type KeyboardEvent, useLayoutEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils";

export interface GooeyDotsProps {
  count: number;
  /** The active index. Leave unset to let the dots manage themselves. */
  value?: number;
  defaultValue?: number;
  onValueChange?: (index: number) => void;

97 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/gooey-dots