A hover tooltip that shows a live preview of any component, perfect for navigation menus and component galleries.
Command Palette
Search for a command to run...
Search for a command to run...
A hover tooltip that shows a live preview of any component, perfect for navigation menus and component galleries.
Speeds up development. Lets us preview components instantly in the registry.
When browsing a component library, users often want to quickly see what a component looks like without navigating away from the current page. This tooltip provides instant visual feedback on hover, making it easier to find the right component.
npx shadcn@latest add https://ui.heygaia.io/r/component-preview-tooltip.jsonimport { ComponentPreviewTooltip } from "@/components/ui/component-preview-tooltip";
// In your sidebar or component list
<ComponentPreviewTooltip componentName="todo-item" side="right">
<Link href="/docs/components/todo-item">
Todo Item
</Link>
</ComponentPreviewTooltip>| Prop | Type | Default | Description |
|---|---|---|---|
| componentName | string | - | Name of the component (matches preview folder name) |
| children | ReactNode | - | Element that triggers the tooltip on hover |
| side | "left" | "right" | "top" | "bottom" | "right" | Tooltip position |