Home

UI components

Design system components come in two forms — in Figma and in code. For developers, components are standards-based web components that can be used in any web codebase. For designers, components are ready-made building blocks that make it easier to create high-fidelity, consistent screens. For cross-functional teams, design system components smooth collaboration and remove ambiguities. Get started with development. Get started with Figma.

Accordion
An Accordion item can be clicked or tapped to expand (show) and close (hide) content.
Alert New
An Alert is a notification component that should communicate system triggered information.
Badge
A Badge informs users about statuses or actions that have been taken.
Button
A Button allows users to take action. Choose a Primary, Secondary or Text button.
Checkbox
A Checkbox allows users to select one or more options out of one or a group of checkboxes.
Dialog
A Dialog is a pop-up window that prompts users with high importance information or requires users to take action.
Icon
An Icon is a graphical representation of a functionality or concept that provides users with quick and recognizable visual cues.
Input
An Input is a single-line text field that allows users to provide text.
List item
A List item can contain simple to complex content and interactions. Multiple list items can be vertically stacked to create a List.
Pagination
Pagination allows users to navigate easy and fast through a set of results, often showcased in a Table or List.
Panel
A Panel can be used for creating an app’s and website’s navigation.
Popover
A Popover is a UI element that appears over content to display additional information without blocking the user.
Progress Bar
A Progress bar is a horizontal or vertical graphical element that visually indicates the completion status of a task or process through a filled or colored portion.
Progress Steps
Progress Steps visually represent the sequential steps of a process or workflow, showing users their current position and the steps completed or remaining.
Radio button
A Radio button allows users to select exactly one out of two or more options.
Select
A Select offers multiple choices in a compact format. It shows the selected option when collapsed and displays a scrollable list of options when expanded.
Tabs
Tabs allow users to navigate between multiple panels, reducing clutter and efficiently fitting more content into a smaller space.
Textarea
A Text area element is a multi-line input field that allows users to enter and edit larger amounts of text within a form.
Toast New
A Toast is a small, non-intrusive popup message that briefly appears on the screen to provide feedback or notifications.
Tooltip
A Tooltip is used for displaying functional information, in form of a short description, about an element.

Try out and feed back

We especially invite teams to try out the @riverty/web-components package. Please report bugs and suggest improvements, it's super helpful. Join the Riverty Design System Group in MS Teams.