Command Palette
Search for a command to run...
Search for a command to run...
Instant context on who you're talking to. Hover any avatar to see profile details without leaving the chat.
npx shadcn@latest add https://ui.heygaia.io/r/author-tooltip.jsonimport { AuthorTooltip } from "@/components/ui/author-tooltip";
export default function Example() {
const author = {
name: "Aryan",
avatar: "https://github.com/aryanranderiya.png",
role: "Founder & CEO",
github: "https://github.com/aryanranderiya",
twitter: "https://twitter.com/aryanranderiya",
linkedin: "https://linkedin.com/in/aryanranderiya",
};
return <AuthorTooltip author={author} />;
}You can pass a custom trigger element instead of the default avatar:
<AuthorTooltip
author={author}
trigger={<button>Hover me</button>}
/>Add extra content inside the tooltip with the children prop:
<AuthorTooltip author={author}>
<div className="text-xs">
<p>Commits: 150</p>
<p>Additions: +5,000</p>
</div>
</AuthorTooltip>| Prop | Type | Default | Description |
|---|---|---|---|
| author | Author | - | Author information object |
| avatarSize | "sm" | "md" | "lg" | "xl" | "sm" | Size of the avatar |
| avatarClassName | string | "cursor-help border-2 border-border" | Additional CSS classes for avatar |
| trigger | ReactNode | - | Custom trigger element (replaces avatar) |
| children | ReactNode | - | Additional content to render in tooltip |
| Property | Type | Required | Description |
|---|---|---|---|
| name | string | Yes | Author's full name |
| avatar | string | Yes | URL to author's avatar image |
| role | string | Yes | Author's role or title |
| github | string | No | GitHub profile URL |
| string | No | Twitter/X profile URL | |
| string | No | LinkedIn profile URL |