Lovable UI components examples

Lovable

A screen for entering a 6-digit verification code sent to a phone.

• Input code

Lovable

A user interface displaying application settings with options for appearance, including background and theme selection.

• Theme settings

Lovable

A user profile dropdown menu displaying account information and navigation links.

• Dropdown menu

Lovable

A workspace management menu displaying current workspace details, upgrade options, credit usage, and a list of other workspaces.

• Dropdown menu

Lovable

A modal dialog confirming the user's intent to disable two-factor authentication, providing a warning message and action buttons.

• Modal

Lovable

A user interface section for configuring sound notifications with multiple radio button options.

• Radio button

Lovable

A dropdown menu displaying workspace visibility options with a selected choice and a restricted option for business users.

• Input select

Lovable

A user interface section for managing people within a workspace, featuring a title, descriptive text, and a segmented control for navigation.

• Segmented control

Lovable

A user interface displaying a list of people in a workspace with their roles, join dates, usage, and credit limits, along with options to manage members and export data.

• Table

Lovable

A user interface for connecting a project to a GitHub account, displaying an empty state with an option to add a new connection.

• Empty state

Lovable

A page section displaying domain management options with a warning message about an unpublished project and a call to action to publish.

• Message

Lovable

A modal window presenting a referral program to earn credits.

• Modal