Link Preview Component

The LinkPreview component is an interactive UI element that displays a preview of a link when hovered over. It enhances user experience by providing additional context about the link.

Features

Hover Preview: Displays a preview of the link when hovered.
Customizable Icon: Optionally show an icon next to the link text.
Interactive Design: Smooth animations and responsive behavior.

Projects that I works on!!!

Sona UI - Open Source UI Component Library : Sona UI

Installation

npx sona-ui@latest add link-preview

Usage


export default function LinkPreviewExample() {
  return (
    <div className="flex w-full flex-col justify-center gap-4">
      <h3>Projects that I works on!!!</h3>
      <ul className="list-disc *:ml-2 *:lg:ml-4">
        <li>
          Sona UI - Open Source UI Component Library :{" "}
          <LinkPreview
            link="https://sona-ui.vercel.app/"
            text="Sona UI"
            className="flex h-full w-full items-center justify-center"
          />
        </li>
      </ul>
    </div>
  );
}

Props

Property	Type	Default	Description
link	string	required	The URL of the link to preview.
text	string	required	The text to display for the link.
showIcon	boolean	true	Whether to show an icon next to the link text.
...linkProps	React.HTMLAttributes<HTMLAnchorElement>	undefined	Additional props to pass to the anchor element.