Eraser UI components examples

Eraser

A dropdown menu for switching workspaces, managing team settings, and user account actions. It features a highlighted active team, a list of actions with icons, and a user profile section at the bottom.

• Dropdown menu

Eraser

A popover menu containing links to support resources, feedback, and documentation, triggered by a floating help button.

• Dropdown menu

Eraser

A progress bar indicating a reached usage limit, accompanied by text stating the limit and a link to upgrade the plan.

• Progress indicator

Eraser

A table displaying a list of files with columns for name, location, created date, edited date, comments count, and author. It includes a top toolbar with tabs for filtering, a search input, an avatar group, and an invite button.

• Table

Eraser

A dark-themed coachmark tooltip pointing to a formatting toolbar. It includes an illustration of the toolbar, a title, a description, progress dots, and a 'Finish' button.

• Coachmark

Eraser

A dark-themed onboarding popover attached to a toolbar button, featuring an illustration, title, description, progress dots, and a 'Next' button.

• Coachmark

Eraser

A floating icon picker panel with a search bar, category folders, and a grid of icons. A dark-themed coachmark tooltip points to the picker, explaining its features with a 'Next' button.

• Coachmark

Eraser

A split view showing a vertical toolbar on the left, an open 'insert item' menu with search and categorized options in the center, and a dark-themed onboarding tour card on the right.

• Coachmark

Eraser

A dark-themed onboarding tooltip pointing to a segmented control. It includes an image of the control, a title, a description, a progress indicator, and a 'Next' button.

• Coachmark

Eraser

• Dropdown menu

Eraser

A dropdown menu with a nested submenu for selecting the appearance mode. The primary menu lists file and workspace actions, while the active 'Appearance' item opens a secondary menu to choose between Light, Dark, and Auto modes.

• Theme settings

Eraser

A horizontal page header containing a title, an options menu icon, a search input, an avatar group, and an invite button.

• Horizontal navigation