VISUALLIdesign system

Component gallery

Every core component on one page. Change props, switch the theme in the header, check Tablet and Phone widths, and copy production-ready JSX (or the rendered HTML) for each. Full guidelines are on each component's page.

Code uses @visualli/design-system/components and needs tokens.css + bundle.css loaded once per app.

Button Actions

Playground

IconButton Actions

Playground

ChatTurn App

Playground

Composer App

Playground

Node Canvas

Playground

SourceChip Canvas

Playground

UpvoteCard Community

Playground

Avatar Feedback

Playground

Badge Feedback

Playground

Toast Feedback

Playground

Tooltip Feedback

Playground · Hover or focus the button.

Signature Foundations

Playground

SpectrumBar Foundations

Playground

ThinkingTree Foundations

Playground

SearchField Inputs

Playground

SegmentedControl Inputs

Playground

Switch Inputs

Playground

TextField Inputs

Playground

Card Layout

Playground

Dialog Overlays

Playground
Playground

SemanticAnchor Understanding

Playground · Hover, click or Tab + Enter the term.

SemanticPeek Understanding

Playground