Link Preview

v1.0.0

Interaction

A component that shows a preview of a link on hover with smooth animations.

Dependencies

framer-motion

@radix-ui/react-hover-card

Installation

Add this component to your project

CLI Installation

npx shadcn@latest add https://ui.authmate.xyz/registry/link-preview.json

Manual Installation

// Copy the link-preview component from the registry

Props

Component properties and their types

url

string

default: undefined

The URL to preview

children

React.ReactNode

default: undefined

The trigger element

className

string

default: undefined

Additional CSS classes

Examples

Code example for this component

Link with Preview

import { LinkPreview } from "@/components/ui/link-preview"

export function LinkPreviewDemo() {
  return (
    <div className="p-8">
      <p className="text-neutral-500 dark:text-neutral-400 text-xl md:text-3xl max-w-3xl mx-auto mb-10">
        Visit{" "}
        <LinkPreview url="https://tailwindcss.com" className="font-bold">
          Tailwind CSS
        </LinkPreview>{" "}
        for amazing utility-first CSS framework and{" "}
        <LinkPreview url="https://framer.com" className="font-bold">
          Framer Motion
        </LinkPreview>{" "}
        for beautiful animations.
      </p>
    </div>
  )
}

Registry

View the component registry file

View Registry

Live Preview

Interactive

Interactive component preview

Visit AuthMate UI Documentation