GitHub Hover Card
Card with smooth hover effect from GitHub's homepage
import {
GhCardImage,
GhCardRoot,
GhCardTitle,
GhCardLabel,
GhCardHeader,
GhCardSubHeader,
GhCardContent,
} from "@/components/github-hover-card";
const imageUrl =
"https://i.scdn.co/image/ab67616d0000b2736c7112082b63beefffe40151";
export function GhCardDemo() {
return (
<GhCardRoot href="https://github.com/FifthWit/ui">
<GhCardImage
blur="30px"
alt="Blurred Mountain"
src={imageUrl}
darken={0.3}
/>
<GhCardTitle>Figma</GhCardTitle>
<GhCardContent>
<GhCardLabel>Design Corp</GhCardLabel>
<GhCardHeader>
Figma gains 100x users after mandating anime girlfriends for all users
</GhCardHeader>
<GhCardSubHeader>Read More</GhCardSubHeader>
</GhCardContent>
</GhCardRoot>
);
}Installation
npx shadcn@latest add https://raw.githubusercontent.com/FifthWit/ui/refs/heads/main/public/r/gh-hover-card.jsonpnpm dlx shadcn@latest add https://raw.githubusercontent.com/FifthWit/ui/refs/heads/main/public/r/gh-hover-card.jsondeno run -A npm:shadcn@latest add https://raw.githubusercontent.com/FifthWit/ui/refs/heads/main/public/r/gh-hover-card.jsonbunx shadcn@latest add https://raw.githubusercontent.com/FifthWit/ui/refs/heads/main/public/r/gh-hover-card.jsonUsage
import {
GhCardImage,
GhCardRoot,
GhCardTitle,
GhCardLabel,
GhCardHeader,
GhCardSubHeader,
GhCardContent,
} from "@//components/github-hover-card";export function GithubCardDemo() {
return (
<GhCardRoot href="https://example.com">
<GhCardImage
blur="30px"
alt="Description"
src="https://example.com/image.png"
darken={0.3}
/>
<GhCardTitle>Hover Me</GhCardTitle>
<GhCardContent>
<GhCardLabel>Design Corp</GhCardLabel>
<GhCardHeader>
Figma gains 100x users after mandating anime girlfriends for all users
</GhCardHeader>
<GhCardSubHeader>Read More</GhCardSubHeader>
</GhCardContent>
</GhCardRoot>
);
}