Understanding

SemanticPeek

An idea's summary, one gesture away — hover or focus with a mouse, the first tap on touch. It "semantically peeks" out of the node.

• Provide children (one or two sentences — underline terms with SemanticAnchor), optional title, color (the idea's topic) and source.
• Actions, right to left by weight: Step inside (onStepInside, only when the idea has rings — enters its inner layer) and Go deeper (onGoDeeper — opens the GoDeeper facets for this idea). When there is no Step inside, Go deeper becomes the primary pill. learnMoreHref adds an external Learn more ↗.
• variant="card" (default) floats beside the node, never over it: hand-cut corners and an offset sheet in the topic color make it read as a note, not a dialog. variant="sheet" docks to the bottom of the canvas on touch: grab handle (tap or drag up to expand, down to collapse or dismiss), ✕ via onClose, 44px actions; a non-modal dialog labelled by its title.
• onBack + backLabel add "‹ backLabel" above the content — used when a term's definition takes over the sheet.
• Formerly FactCard; that name remains as a deprecated alias for one release (onDeeper → onStepInside). See Canvas language › Understanding for how peek, anchor and Go deeper fit together.

Playground

Change the props, switch theme in the header, try Tablet and Phone widths, then copy the code.

Examples

Props

export interface SemanticPeekProps {
  title?: string;
  color?: NodeColor;
  source?: string;
  children: ReactNode;

Use

import { SemanticPeek } from '@visualli/design-system/components';

Source: components/src/ · Guidelines: components/catalog/SemanticPeek/README.md