Link Preview

Enable sighted users to preview content behind a link.

	<script lang="ts">
  import { CalendarDays } from "lucide-svelte";
  import * as Avatar from "@/components//ui/avatar";
  import * as LinkPreview from "@/components//ui/hover-card";
</script>
 
<LinkPreview.Root>
  <LinkPreview.Trigger
    href="https://github.com/sveltejs"
    target="_blank"
    rel="noreferrer noopener"
    class="hover:underline underline-offset-4 rounded-sm focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black"
  >
    @sveltejs
  </LinkPreview.Trigger>
  <LinkPreview.Content class="w-80">
    <div class="flex justify-between space-x-4">
      <Avatar.Root>
        <Avatar.Image
          src="https://github.com/sveltejs.png"
        />
        <Avatar.Fallback>SK</Avatar.Fallback>
      </Avatar.Root>
      <div class="space-y-1">
        <h4 class="text-sm font-semibold">@sveltejs</h4>
        <p class="text-sm">
          Cybernetically enhanced web apps.
        </p>
        <div class="flex items-center pt-2">
          <CalendarDays class="mr-2 h-4 w-4 opacity-70" />
          <span class="text-xs text-muted-foreground">
            Joined September 2022
          </span>
        </div>
      </div>
    </div>
  </LinkPreview.Content>
</LinkPreview.Root>

	<script lang="ts">
  import { CalendarDays } from "lucide-svelte";
  import * as Avatar from "@/components//ui/avatar";
  import * as LinkPreview from "@/components//ui/hover-card";
</script>
 
<LinkPreview.Root>
  <LinkPreview.Trigger
    href="https://github.com/sveltejs"
    target="_blank"
    rel="noreferrer noopener"
    class="hover:underline underline-offset-4 rounded-sm focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black"
  >
    @sveltejs
  </LinkPreview.Trigger>
  <LinkPreview.Content class="w-80">
    <div class="flex justify-between space-x-4">
      <Avatar.Root>
        <Avatar.Image
          src="https://github.com/sveltejs.png"
        />
        <Avatar.Fallback>SK</Avatar.Fallback>
      </Avatar.Root>
      <div class="space-y-1">
        <h4 class="text-sm font-semibold">@sveltejs</h4>
        <p class="text-sm">
          Cybernetically enhanced web apps.
        </p>
        <div class="flex items-center pt-2">
          <CalendarDays class="mr-2 h-4 w-4 opacity-70" />
          <span class="text-xs text-muted-foreground">
            Joined September 2022
          </span>
        </div>
      </div>
    </div>
  </LinkPreview.Content>
</LinkPreview.Root>

@sveltejs

Structure

	<script lang="ts">
  import { LinkPreview } from "bits-ui";
</script>
 
<LinkPreview.Root>
  <LinkPreview.Trigger />
  <LinkPreview.Content />
</LinkPreview.Root>

	<script lang="ts">
  import { LinkPreview } from "bits-ui";
</script>
 
<LinkPreview.Root>
  <LinkPreview.Trigger />
  <LinkPreview.Content />
</LinkPreview.Root>

Component API

LinkPreview.Root

The root component used to manage the state of the state of the link preview.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`openDelay`	`number`	The amount of time in milliseconds to delay opening the preview when hovering over the trigger. `Default: 700`
`closeDelay`	`number`	The amount of time in milliseconds to delay closing the preview when the mouse leaves the trigger. `Default: 300`
`positioning`	`FloatingConfig`	The positioning configuration for the preview. (docs coming soon) `Default: { position: "bottom", align: "center" }`
`closeOnOutsideClick`	`boolean`	Whether or not to close the preview when clicking outside of it. `Default: true`
`closeOnEscape`	`boolean`	Whether or not to close the preview when pressing the escape key. `Default: true`
`open`	`boolean`	The open state of the link preview component. `Default: false`
`onOpenChange`	`(open: boolean) => void`	A callback that fires when the open state changes. `Default: —— undefined`

LinkPreview.Trigger

A component which triggers the opening and closing of the link preview on hover or focus.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`

Data Attribute	Description/Value
`data-state`	The open state of the link preview. `Value: 'open' \| 'closed'`

LinkPreview.Content

The contents of the link preview which are displayed when the preview is open.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`

Data Attribute	Description/Value
`data-state`	The open state of the link preview. `Value: 'open' \| 'closed'`

LinkPreview.Arrow

An optional arrow element which points to the trigger when the preview is open.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`size`	`number`	The height and width of the arrow in pixels. `Default: 8`

Data Attribute	Description/Value
`data-arrow`	Present on the arrow element. `Value: ''`

🚧 UNDER CONSTRUCTION 🚧