Current UI components examples

Current

• Hero section

Current

A subtle inline alert providing troubleshooting information and a link to a video tutorial.

• Tips

Current

A rich text editor field used to configure a default template, featuring a formatting toolbar and pre-filled placeholder text.

• Rich text editor

Current

A list item containing an icon, a title, a description, and a toggle switch to enable or disable email notifications.

• Toggle/Switch

Current

A profile photo upload component featuring a circular avatar placeholder with an initial and an 'Upload' button.

• File upload input

Current

A user profile header displaying an initial avatar with a status badge and the user's full name.

• Avatar

Current

A dropdown menu for switching workspaces, managing settings, and signing out. It includes the current user's email and an active workspace indicator.

• Dropdown menu

Current

A search input field accompanied by a row of filter chips below it. One filter chip is active and shows a selected value with a clear icon.

• Sorting & filtering

Current

A search input field above a row of filter chips. The 'Streams' chip is active and displays a popover menu with a list of selectable options.

• Sorting & filtering

Current

A search input field with a magnifying glass icon and placeholder text, followed by a row of three pill-shaped filter buttons.

• Sorting & filtering

Current

A dark-themed toast notification confirming a successful sign-in and instructing the user to return to Figma.

• Notification Toast

Current

A card component displaying a welcome message and a checklist of onboarding tasks. Completed tasks are struck through with a checkmark icon. A floating action button indicates overall progress.

• Stepper