Skip to main content
Menu

Rimble Components 🏗

On this page

Rimble Components 🏗

Rimble UI

Rimble UI is our open-source React component library.

These components are the building blocks for making your dApp's user interface.

Useful links
Rimble-UI GitHub repo
Rimble-UI on Storybook

Components A-Z

Example of a Rimble Avatar component

Avatar

Images that represent things – like currencies – in your product.
Example of a Rimble Blockie component

Blockie

Identicons for representing Ethereum addresses.
Example of a Rimble Box component

Box

A responsive component for box-model layouts.
Example of a Rimble Button component

Button

Allows a user to take an action or make a choice.
Example of a Rimble Card component

Card

Creates a Box layout for content and actions about a specific subject.
Example of a Rimble Checkbox component

Checkbox

Allows a user to choose one or more items from a list.
Example of a Rimble EthAddress component

EthAddress

Allows a user to quickly view, copy and scan an Ethereum address.
Example of a Rimble Field component

Field

A quick way to add a label to your form inputs.
Example of a Rimble Flash component

Flash

A way to deliver messages to your user without blocking them.
Example of a Rimble Flex component

Flex

For arranging content in columns or rows and making responsive layouts.
Example of a Rimble Form component

Form

Gives your inputs validation styles and feedback messages.
Example of a Rimble Heading component

Heading

Give pages or page areas titles that introduce the content below.
Example of a Rimble Icon component

Icon

Add Material Design icons to your interface using Rimble.
Example of a Rimble Image component

Image

Add an image and its alt description to your product.
Example of a Rimble Input component

Input

Input allows you add different types of inputs when building forms.
Example of a Rimble Link component

Link

Link provides a basic styled link – ideal for use in copy.
Example of a Rimble Loader component

Loader

Loader lets you know that a process is happening or content is loading.
Example of a Rimble MetaMaskButton component

MetaMaskButton

Show your users when an action will involve MetaMask.
Example of a Rimble Modal component

Modal

Display information that requires a choice or an acknowledgement.
Example of a Rimble Pill component

Pill

Pill allows you to show a status or grouping at a glance.
Example of a Rimble Progress component

Progress

Shows a user their progress through a process or loading.
Example of a Rimble QR component

QR

QR creates a QR code from a string – like an Ethereum address.
Example of a Rimble Radio component

Radio

Allows a user to choose only one item from a list.
Example of a Rimble Select component

Select

Allows a user to choose from a drop-down list.
Example of a Rimble Slider component

Slider

Allows a user to control a value using a slider.
Example of a Rimble Table component

Table

Allows a user to compare data in your product.
Example of a Rimble Text component

Text

Text allows you to control the presentation of your copy content.
Example of a Rimble Textarea component

Textarea

Textarea gives you a long-form free-text input for your forms.
Example of a Rimble ToastMessage component

ToastMessage

Provide your users with an unimportant temporary message.
Example of a Rimble Tooltip component

Tooltip

Give your user extra information about something on the interface.
Example of a Rimble UPortButton component

UPortButton

Show your users when an action will involve uPort.

Web3 components

Components A-Z