Rich Popover

A popover component displaying title, description, icon, and action buttons. It appears when triggered, with animated transitions. Use it for rich interactive tooltips in UIs.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/rich-popover

npx layro-cli add @educlopez/rich-popover

npx layro-cli add @educlopez/rich-popover

bunx layro-cli add @educlopez/rich-popover

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client";

import {
  Arrow as PopoverArrow,
  Content as PopoverContent,
  Portal as PopoverPortal,
  Root as PopoverRoot,
  Trigger as PopoverTrigger,
} from "@radix-ui/react-popover";
import SmoothButton from "@/components/smoothui/smooth-button";
import { Clock, ExternalLink, Play } from "lucide-react";
import { motion, useReducedMotion } from "motion/react";

import type * as React from "react";