Canvas

Node

One idea on the canvas: an organic blob in a topic color with up to three depth rings.

• Provide label (≤ 6 words) and color (a topic name or CSS color). level picks the outline shape; rings = levels beneath (0–3); size root, node or mini.
• Interaction: onOpen (mouse: click a ringed node to step inside) or onPress (replaces it as the click/tap action — touch uses it for "first tap previews, second tap opens", and it makes any node a button with aria-pressed = selected). Without any of these the node is an image, not a control.
• selected lifts the node and thickens its outline; dimmed spotlights others (60% on touch, 40% in the Focus palette). Never put paragraphs in a node.

Playground

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

Examples

Props

export interface NodeProps {
  label: string;
  color?: NodeColor;
  level?: number;
  shape?: number;
  rings?: 0 | 1 | 2 | 3;
  size?: 'root' | 'node' | 'mini';
  selected?: boolean;
  dimmed?: boolean;

Use

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

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