Mocha UI components examples

Mocha

A horizontal tab navigation bar with three options, where 'Usage' is the currently selected tab.

• Tabs

Mocha

A user interface displaying a pricing plan comparison for a software service, including current plan status and upgrade options.

• Pricing section

Mocha

A dropdown menu displaying user account details, subscription status, navigation links, and application settings.

• Dropdown menu

Mocha

A section displaying project size progress with an upgrade prompt.

• Progress indicator

Mocha

A web analytics dashboard displaying real-time visitor and pageview data with a line chart.

• Charts

Mocha

• Dropdown menu

Mocha

A modal dialog informing the user about a premium feature and prompting an upgrade to access it, listing benefits.

• Modal

Mocha

A user interface element displaying a setting for watermark visibility, accompanied by an upgrade prompt and a toggle switch.

• Toggle/Switch

Mocha

A dropdown menu is displayed with options for managing a task or project, including rename, duplicate, download code, debug, and delete, alongside a nested popover for debugging actions like showing logs and restarting a sandbox.

• Dropdown menu

Mocha

A card explaining the concept of "Production" within an application, featuring a title, explanatory text, a "Learn more" link, pagination, and a "Next" button.

• Stepper

Mocha

A dropdown menu displaying options for different device resolutions, such as desktop, tablet, and mobile, with the current selection indicated by a checkmark.

• Dropdown menu

Mocha

• Slideshow