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.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/glimpse.jsonnpx shadcn@latest add https://www.shadcn.io/registry/glimpse.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/glimpse.jsonbunx shadcn@latest add https://www.shadcn.io/registry/glimpse.jsonFeatures
- 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
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.
Counter
Interactive counter component with animated number display and increment/decrement buttons. Perfect for React applications requiring numeric input controls with Next.js integration and TypeScript support.
Interactive Grid Pattern
Interactive SVG grid background component for React and Next.js applications. Built with TypeScript support, Tailwind CSS styling, and shadcn/ui design featuring hover effects, customizable dimensions, and responsive layouts.