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	Value/Description
`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	Value/Description
`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	Value/Description
`data-arrow`	Present on the arrow element. `Value: ''`

🚧 UNDER CONSTRUCTION 🚧