PreviewCard · Tinyrack Design System

Contract

This Tinyrack wrapper preserves Base UI behavior, React 19 refs, native props, events, and the render contract. Playground controls cover align, visible description, label, side, and title. Open state remains internal so hover and focus use normal component behavior; Reset remounts the preview closed and restores the content and positioning defaults.

Trigger waits 600ms before opening and 300ms before closing by default. Override those values with delay and closeDelay only when the trigger-to-card pointer path remains forgiving.

Install

pnpm add @tinyrack/ui

Scroll inside the code area to read long lines.

Styles

@import '@tinyrack/ui/components/preview-card.css';

Scroll inside the code area to read long lines.

Imports

import { TRPreviewCard } from '@tinyrack/ui/components/preview-card';

Scroll inside the code area to read long lines.

Playground

Rack Alpha

Usage

Default permalink

Rack Alpha

Examples

Detached trigger handle permalink

TRPreviewCard.createHandle associates a trigger and root that cannot be colocated. The preview remains non-interactive and reflects the link destination.

Rack Beta

Timing and collision-safe positioning permalink

The card demonstrates top-side placement, end alignment, an arrow, and viewport-aware containment.

Alignment along the side permalink

start

center

end

Long collision-safe content permalink

Edge rack

API

Every compound part and prop/state type is exported from @tinyrack/ui/components/preview-card; styles remain opt-in through the matching CSS subpath. Root owns controlled or uncontrolled open state. Trigger is the destination link and owns delay, closeDelay, handle, and optional payload. Portal selects the DOM container, Backdrop is optional, Positioner handles collision-aware placement, Popup contains the preview, and Arrow points to the active trigger. Use Viewport only for animated content changes between multiple triggers. TRPreviewCard.createHandle<Payload>() links detached triggers to a root.

Keep popup content non-interactive. Preview content is unavailable to touch and screen-reader users, so it must only summarize information present at the trigger's destination. Escape dismisses an open preview without moving focus from its current context.

TRPreviewCard is a progressive enhancement for mouse hover and keyboard focus, not a touch-only disclosure. The trigger remains a real link: tapping it follows its href, so do not put required information or the only path to an action inside the preview. Provide a separate button/dialog pattern when touch users must open the supplemental surface without navigating.