Collaboration
Project Management
Finance
Glimpse
A component that shows a preview of a URL when hovering over a link.
Installation
npx love-ui@latest add glimpseUsage
import { Glimpse, GlimpseTrigger, GlimpseContent, GlimpseImage, GlimpseTitle, GlimpseDescription } from "@/components/glimpse"<Glimpse>
<GlimpseTrigger>
<a href="https://example.com">Hover to preview</a>
</GlimpseTrigger>
<GlimpseContent>
<GlimpseImage src="/preview.jpg" alt="Preview" />
<GlimpseTitle>Example Title</GlimpseTitle>
<GlimpseDescription>A brief description of the link content.</GlimpseDescription>
</GlimpseContent>
</Glimpse>Features
- Fetches data from a URL in a React Server Component
- Preview a URL when hovering over a link
- Show title, description, and image
- Customizable hover card appearance
- Smooth transitions for hover state
- Accessible keyboard navigation
- Touch-friendly for mobile devices
- Customizable styling through className props
- Reduced motion support for animations
- Works with any link or element with role="link"
Examples
Custom styling
Check out LoveUI on GitHub
import {
Glimpse,
GlimpseContent,
GlimpseDescription,
GlimpseImage,
GlimpseTitle,
GlimpseTrigger,
} from "../../../../../packages/glimpse";
import { glimpse } from "../../../../../packages/glimpse/server";
const Example = async () => {
const data = await glimpse("https://github.com/loveconnor/loveui");
return (
<div>
Check out{" "}
<Glimpse closeDelay={0} openDelay={0}>
<GlimpseTrigger asChild>
<a
className="font-medium text-primary underline"
href="https://github.com/loveconnor/loveui"
>
LoveUI
</a>
</GlimpseTrigger>
<GlimpseContent className="w-80 bg-secondary">
<GlimpseImage className="shadow-lg" src={data.image ?? ""} />
<GlimpseTitle className="line-clamp-2 font-semibold text-lg">
{data.title}
</GlimpseTitle>
<GlimpseDescription className="text-sm">
{data.description}
</GlimpseDescription>
</GlimpseContent>
</Glimpse>{" "}
on GitHub
</div>
);
};
export default Example;