Link Preview

Use Link Preview when a link needs a little extra context before someone leaves the current page. The preview appears on hover or focus without changing the destination of the link.

Preview

Reduce motion:Off

Inspect

Projects that I works on!!!

Sona UI - Open Source UI Component Library : Sona UI

Installation

Motion

npx shadcn@latest add @sona-ui/link-preview

Basic usage

preview-link.tsx

import LinkPreview from "@/components/ui/link-preview/link-preview";
 
export function PreviewLink() {
return <LinkPreview href="https://example.com">Read the reference</LinkPreview>;
}

Examples

Add an icon when it helps identify the destination. Keep the preview brief and ensure the link label still makes sense without it.

Usage


export default function LinkPreviewExample() {
  return (
    <div className="flex flex-col gap-4 justify-center w-full">
      <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://sonaui.com/"
            text="Sona UI"
            className="flex items-center justify-center h-full w-full"
          />
        </li>
      </ul>
    </div>
  );
}

API

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.

Accessibility

The original link remains the primary control. Ensure its visible text describes the destination on its own.

Styling

Use className and the preview options to match the surrounding text and link treatment.

Contact

Found a bug or need help using this component? Open an issue on GitHub.

License & Usage

Sona UI is available under the MIT license. You may use, modify, and distribute this component in personal and commercial projects.

Was this page helpful?

Your response helps us improve component docs.