Components

The UI elements that you can inject into your project either by using the components.

Bottom Sheet

A dialog containing supplementary content anchored to the bottom of the screen.

Busy Screen

A screen that indicates busy loading.

Card

Cards are surfaces that display content and optionally actions on a single topic.

Checkbox

Checkboxes allow the selection of multiple options from a set of options.

Collapsible

A Collapsible toggle summary.

Content

The detail of the layout where your content finds place.

Copy

Copy component that copies selection.

Dropdown

Dropdown displays a list of selectable options for a user.

External Link

A wrapper to render quickly external link.

Header Title

An opinionated title for the dapp.

Html

A component for safe (sanitized) html content rendering.

Infinite Scroll

Calls an action when the user scrolls a specified distance in a list.

Input

A styled input field where the user can enter data.

Input Range

An input of type range to let the user specify a numeric value which must be no less than a given value, and no more than another given value.

Island

Scope your content within an island.

Item Action

Opinionated compoment to render items with icon and buttons.

Key Value

Render a label and its value.

Key Value Info

Render a label, its value and an information.

Layout

Header, menu and content. The structure of your dapp.

Markdown

A component for safe (sanitized) Markdown to HTML content rendering.

Modal

Modal component is used to display content that temporarily blocks interactions with the main view of an application.

Nav

A navigation column.

Page Banner

A main banner for landing pages.

Popover

A popover is a floating container that is rendered over the content next to an anchor — commonly a button — which initiates its display.

Progress Bar

An indicator showing the completion progress of a task.

Progress Steps

Display the progression of a long-lasting task with various steps.

QR Code Generator

Generates a QR Code.

QR Code Reader

Read a QR Code with the camera.

Section

A component to render a section with a title, value and description.

Segment

A segment controls.

Skeleton Text

A component for rendering placeholder content.

Spinner

A spinner component is used to indicate users that their action is being processed.

Split Content

The detail of the layout where the content finds place in two columns.

Split Block

Displays content in a column on mobile devices and in a row on desktops.

Tag

Tags are used to inform users of the status of an object or of an action that’s been taken.

Toasts

Toasts are non-disruptive messages that appear in the interface to provide quick, at-a-glance feedback on the outcome of an action.

Theme Toggle

An opinionated theme toggle.

Theme Toggle Button

An opinionated theme toggle button.

Tooltip

Tooltips provide extra information on hover or tap.

Toggle

Toggles are switches that change the state of a single option.

Value

Shorthand to render a value.

Wizard Modal

A particular type of Modal component used to present several steps in form of a wizard.