Command Palette

Search for a command to run...

Loading component...

Components paid Vercel Tooltip

Vercel Tooltip

Vercel's famous tooltip design recreated with smooth animations and interactive feedback. Features dynamic positioning, spring-based motion, and keyboard shortcut indicators for professional navigation menus.

Dependencies

framer-motionlucide-react

Interaction Type

Hover over icons to see animated tooltips
Smooth spring-based animations with clip-path effects

CLI UNAVAILABLE

pro component, try copying the source code from top right corner

How to use

import { VercelIconsMenuWithTooltip } from "@/components/v1/skiper43";
import { MessageCircle, Inbox, Settings } from "lucide-react";

const CustomMenu = () => {
  const items = [
    {
      icon: <MessageCircle className="h-full w-full" />,
      label: "Messages",
      labelHasKeyword: ["M"],
      hasBadge: false,
    },
    {
      icon: <Inbox className="h-full w-full" />,
      label: "Inbox",
      labelHasKeyword: false,
      hasBadge: true,
    },
    {
      icon: <Settings className="h-full w-full" />,
      label: "Settings",
      labelHasKeyword: [<Command className="size-2.5" key="cmd" />, "S"],
      hasBadge: false,
    },
  ];

  return (
    <VercelIconsMenuWithTooltip items={items} className="your-custom-class" />
  );
};
Props
Description

items

Array of menu items

className

Additional CSS classes for styling

Menu Item Type

type MenuItem = {
  icon: React.ReactNode; // Icon component (Lucide React recommended)
  label: string; // Display text for the menu item
  labelHasKeyword: React.ReactNode[] | false; // Keyboard shortcuts or false
  hasBadge: boolean; // Whether to show a notification badge
};

Attribution

Inspired by and adapted from vercel.com

Source code

Click on the top right
to view the source code

Keep in mind

Most components here are recreations of the best out there. I don't claim to be the original creator. This is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone, but if I missed something, let me know.

Contact

Additionlly, if you find any bug or issue, feel free to
Drop a dm.

License & Usage:

  • Free to use and modify in both personal and commercial projects.
  • Attribution to Skiper UI is required when using the free version.
  • No attribution required with Skiper UI Pro.
PreviousNext