Preview Card

StableBase UI

Live preview

Installation

pnpm dlx shadcn@latest add @sc1m/preview-card

This also merges the token layer and installs src/lib/cn.ts plus @base-ui/react. For the manual route — prerequisites, components.json, and app-level setup — see Installation.

Usage

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

Composition

Every part is a separate export. PreviewCard owns state; the rest are presentational and must appear in this order.

PreviewCard├── PreviewCardTrigger└── PreviewCardContent

Example

The preview above, with its source. This is the demo module verbatim, so the code and the thing it renders cannot drift apart.

@sprout-team

<PreviewCard>
  <PreviewCardTrigger
    href="#"
    delay={0}
    className="text-fg underline decoration-line-strong underline-offset-2 outline-none focus-visible:outline-2 focus-visible:outline-ring"
  >
    @sprout-team
  </PreviewCardTrigger>
  <PreviewCardContent>
    <p className="text-sm font-semibold">Sprout Team</p>
    <p className="mt-1 text-sm text-fg-muted">
      Design system maintainers. Hover to preview, click to visit.
    </p>
  </PreviewCardContent>
</PreviewCard>

API reference

Each part forwards every prop of its Base UI counterpart; the tables list the ones declared on the part itself. See Base UI's reference for the inherited element props.

PreviewCard

PropTypeDefaultDescription

defaultOpenbooleanfalseWhether the preview card is initially open.

openboolean—Whether the preview card is currently open.

onOpenChange((open: boolean, eventDetails: PreviewCardRoot.ChangeEventDetails) => void)—Event handler called when the preview card is opened or closed.

onOpenChangeComplete((open: boolean) => void)—Event handler called after any animations complete when the preview card is opened or closed.

actionsRefReact.RefObject<PreviewCardRoot.Actions | null>—A ref to imperative actions.

handlePreviewCardHandle<Payload>—A handle to associate the preview card with a trigger.

triggerIdstring | null—ID of the trigger that the preview card is associated with.

defaultTriggerIdstring | null—ID of the trigger that the preview card is associated with.

PreviewCardTrigger

PropTypeDefaultDescription

handlePreviewCardHandle<Payload>—A handle to associate the trigger with a preview card.

payloadPayload—A payload to pass to the preview card when it is opened.

delaynumber600How long to wait before the preview card opens.

closeDelaynumber300How long to wait before closing the preview card.

Accessibility

Behaviour, focus management, and ARIA wiring come from Base UI's Preview Card — see its reference for the full keyboard map.

Design tokens

The component reads semantic tokens only — no raw colour, radius, or duration appears in its source. Override the token, not the component.

TokenApplied to

--brand-radius-lgPreviewCardContent

--fgPreviewCardContent

--linePreviewCardContent

--shadow-overlayPreviewCardContent

--surface-raisedPreviewCardContent

Source

src/components/ui/preview-card/preview-card.tsx — no next/* imports, so it drops into any React 19 + Tailwind v4 app.

Preview Card

On this page