Preview

Import

import { PreviewCard, PreviewCardTrigger, PreviewCardContent } from "@sigil-ui/components";

Usage

<PreviewCard>
  <PreviewCardTrigger href="/docs/installation">Installation guide</PreviewCardTrigger>
  <PreviewCardContent
    title="Set up Sigil"
    description="Install the library, load a preset, and compose your first page."
    side="bottom"
  />
</PreviewCard>

Use PreviewCardTrigger for the link and put the preview's title, description, and optional image on PreviewCardContent. The root coordinates open state and positioning.

Props

PreviewCard

Prop	Type	Description
`open`	`boolean`	Controlled visibility.
`defaultOpen`	`boolean`	Initial visibility in uncontrolled mode.
`onOpenChange`	`(open: boolean) => void`	Called when visibility changes.

PreviewCardContent

Prop	Type	Default	Description
`title`	`string`	—	Preview heading.
`description`	`string`	—	Supporting description.
`image`	`string`	—	Optional image URL.
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`	Preferred side of the trigger.
`sideOffset`	`number`	`8`	Distance from the trigger.
`children`	`ReactNode`	—	Additional preview content.

Accessibility

The trigger remains a normal link. The preview provides supplementary context, so the link text must explain the destination without requiring a hover.

Preview Card