Components

Root canvas with theme background and padding.

Primary vertical scene layout with optional title and subtitle.

Standalone heading and supporting copy.

Horizontal flex layout with stable gaps and alignment.

Vertical flex layout for stacked composition.

Compact vertical grouping for related content.

Titled container for grouped visual content.

General-purpose surface with tone, padding, and shadow.

Application or terminal window framing.

Short semantic color accent.

Theme-aware technical icon set.

Wrapping-safe SVG or flex label.

Math-aware text formatting for React content.

Positioned math overlay aligned with custom SVG geometry.

Compact semantic SVG label.

Inline status, category, or metadata label.

Emphasized label with tone gradient.

Small label-value pair.

Formula, result, and supporting detail.

Numbered or staged process card.

KPI value with label and context.

Focused takeaway, warning, or recommendation.

Compact list of supporting facts.

Code or command excerpt with optional line numbers.

Side-by-side alternatives or before/after states.

Aligned technical metadata rows.

Single labeled unit for feature or system maps.

Dense grid of related labeled units.

Frame metadata for text, image, or custom branding.

Single operational state with detail.

Grouped checks, warnings, and pending work.

Ordered events in horizontal or vertical form.

Connected horizontal or vertical stages.

Compact process pipeline with shared title.

Labeled progress bar and value.

Comparable progress across several measures.

Layered neural network or staged DAG.

Auto-laid architecture graph with nested groups, icons, and semantic edges.

Auto-laid hierarchy, taxonomy, or decision tree.

Typed participants, messages, notes, activations, and alt, loop, or parallel fragments.

Schema-aware batch and streaming lineage compiled into a stable directed graph.

Nested region, network, and runtime boundaries with typed network connections.

Transformer computation topology with tensor metadata and collective routes.

Numeric or symbolic matrix with headers.

Color-scaled matrix for intensity and correlation.

Matrix with named regions and boundaries.

Structured rows and columns with headers.

General labeled cell grid.

Compact categorical bars for dense layouts.

Shared chart title, subtitle, legend, and footer.

Part-to-whole composition with center label.

Part-to-whole values along one dimension.

Categorical comparison with labels and values.

One or more trends across an ordered axis.

Point distribution across two numeric axes.

Automatic non-dominated frontier across competing numeric objectives.

Numeric decision map split by configurable policy thresholds.

Low, midpoint, and high ranges by category.

Reusable color key for charts and diagrams.

Rounded SVG box with label and tone.

Straight labeled SVG arrow.

Reusable SVG arrowhead definition.

Straight directional connector with label and tone.

Alias for flow connectors in diagram code.

Vector with optional endpoints and arrowhead.

Line segment for geometric constructions.

SVG plotting frame with border and fill.

Labeled point for SVG figures.

Point marker with optional text label.

Dotted or dashed SVG guide line.

Coordinate plane for points, vectors, and paths.