Preview card
A rich, hoverable card shown on hover or on a press
design-system.md
Tokens, semantic roles and the theme extension mechanism — the one file every surface reads.
align="center" · card left 150 · last action: none
Installation
nub add @gpuixui/componentsUsage
import {
PreviewCard,
PreviewCardContent,
PreviewCardTrigger,
} from "@gpuixui/components";
<PreviewCard>
<PreviewCardTrigger>design-system.md</PreviewCardTrigger>
<PreviewCardContent label="design-system.md">
<text>Tokens, semantic roles and the theme extension mechanism.</text>
</PreviewCardContent>
</PreviewCard>;Composition
PreviewCard
├── PreviewCardTrigger
└── PreviewCardContentBehaviour
PreviewCardContenttakes the popover'salign:startshares the trigger's left edge,center(the default) its centre line andendits right edge, measured against the trigger rather than the runtime's containing block.- The card is hoverable, so the pointer can leave the trigger and cross the 6px
gap: the close is delayed (
closeDelay, 150 ms by default) and the card's own enter cancels it.
API
| Part | Renders | Props |
|---|---|---|
PreviewCard | a positioning root; owns open state and the timers | open?, defaultOpen?, onOpenChange?, openDelay?, closeDelay?, children |
PreviewCardTrigger | button, aria-expanded | button props |
PreviewCardContent | anchored role="group" named by label | label (required), side?, align? (default center), sideOffset?, collisionPadding?, alignOffset?, className?, children |
Keyboard
- Escape
- closes the open card
read from preview-card.tsx
Edit this page on GitHubpackages/components/docs/preview-card.mdx