Glimpse

URL preview hover component for React and Next.js applications. Built with TypeScript support, Tailwind CSS styling, and shadcn/ui design featuring server-side data fetching, smooth transitions, and mobile accessibility.

Loading component...

Installation

npx shadcn@latest add https://www.shadcn.io/registry/glimpse.json

npx shadcn@latest add https://www.shadcn.io/registry/glimpse.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/glimpse.json

bunx shadcn@latest add https://www.shadcn.io/registry/glimpse.json

Features

Server-side fetching - URL metadata extraction using React Server Components for Next.js applications
Hover previews - Link previews with title, description, and image display using JavaScript interactions
Smooth transitions - Animated hover cards with customizable timing using Tailwind CSS animations
Mobile accessible - Touch-friendly interactions with keyboard navigation using TypeScript event handling
Customizable styling - Full appearance control with className props using shadcn/ui theming patterns
Reduced motion - Respects user accessibility preferences for animation sensitivity
Open source - Free URL preview component with flexible link element support

Examples

Custom styling

Loading component...

Use Cases

Content sharing - Blog post previews and social media link cards
Documentation - External resource previews with metadata display
E-commerce - Product link previews with images and descriptions
News aggregation - Article previews with titles and summaries

Implementation

Uses React Server Components for URL fetching. Hover cards built with Radix UI primitives. Supports any link element. Handles fetch errors gracefully with fallback states.