Skip to main content

Use custom UI

The snap_dialog RPC method and onTransaction exported method use the @metamask/snaps-ui module to display custom user interface (UI) components.

To use custom UI, first install @metamask/snaps-ui using the following command:

yarn add @metamask/snaps-ui

Then, whenever you're required to return a custom UI component, import the components from the package and build your UI with them. For example:

import { panel, heading, text } from '@metamask/snaps-ui';

// ...

const content = panel([
  heading('Alert heading'),
  text('Something happened in the system.'),
]);

return content;

Components​

The NodeType enum exported by @metamask/snaps-ui details the available components.

copyable​

Outputs a read-only text field with a copy-to-clipboard shortcut.

import { copyable } from '@metamask/snaps-ui';

// ...

const content = copyable('Text to be copied');

divider​

Outputs a horizontal divider.

import { panel, divider, text } from '@metamask/snaps-ui';

// ...

const content = panel([
  text('Text before the divider'),
  divider(),
  text('Text after the divider'),
]);

heading​

Outputs a heading. This is useful for panel titles.

import { panel, heading, text } from '@metamask/snaps-ui';

// ...

const content = panel([
  heading('Title of the panel'),
  text('Text of the panel'),
]);

image​

Outputs an image. This component takes an inline SVG. It does not support remote URLs. You can embed JPG or PNG in SVG using data URIs. The SVG is rendered within an \<img> tag, which prevents JavaScript or interaction events from being supported.

import { image } from '@metamask/snaps-ui';

// ...

const content = image('<svg width="400" height="400" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.514 17.874 9 5c.021.011.043.016.064.026s.051.021.078.031a.892.892 0 0 0 .688 0c.027-.01.052-.019.078-.031s.043-.015.064-.026l9-5A1 1 0 0 0 22 16.9L21 7V2a1 1 0 0 0-1.625-.781L14.649 5h-5.3L4.625 1.219A1 1 0 0 0 3 2v4.9l-1 10a1 1 0 0 0 .514.974ZM5 7V4.081l3.375 2.7A1 1 0 0 0 9 7h6a1 1 0 0 0 .625-.219L19 4.079V7.1l.934 9.345L13 20.3v-2.967l1.42-.946A1.3 1.3 0 0 0 15 15.3a1.3 1.3 0 0 0-1.3-1.3h-3.4A1.3 1.3 0 0 0 9 15.3a1.3 1.3 0 0 0 .58 1.084l1.42.946v2.97l-6.94-3.855Zm3.5 6a2 2 0 1 1 2-2 2 2 0 0 1-2 2Zm5-2a2 2 0 1 1 2 2 2 2 0 0 1-2-2Z"/></svg>');

panel​

Outputs a panel, which can be used as a container for other components.

import { panel, heading, text } from '@metamask/snaps-ui';

// ...

const insights = [
  /*...*/
];
const content = panel([
  heading('Here are the transaction insights'),
  ...insights.map((insight) => text(insight.description)),
]);

spinner​

Outputs a loading indicator.

import { panel, heading, spinner } from '@metamask/snaps-ui';

// ...

const content = panel([heading('Please wait...'), spinner()]);

text​

Outputs text.

import { text } from '@metamask/snaps-ui';

// ...

const content = text('This is a simple text UI');

Markdown​

Text-based components accept a very small subset of inline Markdown: **bold** and _italic_. This subset will be increased in the future.

Emoji​

Text-based components accept emoji.