Superlist UI components examples

Superlist

A hero section featuring a prominent headline, logo, and a row of pill-shaped buttons for different use cases. Below, a preview of the app interface is partially visible.

• Hero section

Superlist

A pill-shaped toast notification informing the user that the app is up to date. It includes a primary action to view release notes and a secondary action to dismiss the toast.

• Alert

Superlist

Account settings modal with task automation options.

• Toggle/Switch

Superlist

A slash command menu triggered within a text editor, displaying a list of block types like Task, Paragraph, Headings, and lists. The 'Task' option is currently highlighted.

• Rich text editor

Superlist

A toggle switch to enable or disable recently viewed lists.

• Toggle/Switch

Superlist

A pill-shaped banner providing a helpful tip or suggestion, featuring an icon, text, an action button, and a close button.

• Alert

Superlist

A popover menu triggered by an avatar, containing account settings, team management, upgrade options, and support links.

• Toggle/Switch

Superlist

A sidebar navigation list showing an item being dragged and dropped to a new position. A blue line indicates the drop target location.

• Reorder

Superlist

A share popover allowing users to search for people, teams, or emails to invite as collaborators. It displays current collaborators and their roles, along with options to copy a link or change team access.

• Dropdown menu

Superlist

A booking card with a checkbox and a date and time indicator.

• Badge

Superlist

A popover menu for setting a reminder on a task, featuring predefined time options and a custom reminder option.

• Datepicker

Superlist

A popover menu for selecting a specific time, featuring a text input field with autocomplete and a scrollable list of time options in 30-minute increments.

• Datepicker