Meiro UI components examples

Meiro

A dark-themed hero section featuring a prominent headline with inline graphics, a subheadline, a primary call-to-action button, and trust badges. It also includes a top navigation bar with a logo, links, and login/signup buttons.

• Hero section

Meiro

A progress bar indicating the number of AI generations used out of a total limit.

• Progress indicator

Meiro

A horizontal tab navigation component for switching between Account, Plans, and Billing settings. The active tab is indicated by a bright yellow underline and white text, while inactive tabs use muted gray text.

• Tabs

Meiro

An open select dropdown for choosing the number of questions, showing options from 2 to 6 with the first option selected.

• Input select

Meiro

A multi-step process with a creation guide button.

• Stepper

Meiro

A section displaying an embeddable code snippet with a prominent 'Copy code' button.

• Code block

Meiro

A dark-themed row containing a text label and a toggle switch, currently in the active state.

• Radio button

Meiro

A floating toast notification confirming a successful save action, featuring a green checkmark icon, a brief message, and a close button.

• Alert

Meiro

A color picker popover with a gradient selection area, hue and opacity sliders, HEX and RGBA input fields, and an 'Apply color' button.

• Color picker

Meiro

A dark-themed toast notification confirming a published status, featuring a success icon, an 'Open' action button, and a close button.

• Alert

Meiro

A dark-themed panel displaying two progress bars tracking AI generation usage limits.

• Progress indicator

Meiro

A dark-themed breadcrumb trail showing the user's current location within a quiz editor. It includes an icon for the root, a truncated quiz title, and the current question number, separated by chevron icons.

• Breadcrumb