Super UI components examples

Super

A standard search input field with a magnifying glass icon and placeholder text.

• Input search

Super

A card displaying a preview of a website, its title, URL, status, and actions to edit or manage it.

• Card

Super

A segmented control to switch between grid and list views. The grid view is currently selected.

• Segmented control

Super

• Button

Super

A card displaying a site preview, title, URL, and status badge, accompanied by an open dropdown menu offering various site management actions.

• Dropdown menu

Super

A pill-shaped badge indicating a 'Paid' status, featuring green text and a checkmark icon.

• Badge

Super

A pill-shaped badge indicating an 'Idle' status, featuring a text label and a small dot icon.

• Badge

Super

An inline warning alert box with an icon and text explaining the consequences of changing a billing cycle.

• Alert

Super

A settings section containing multiple sliders to adjust typography sizes. It includes a title, a brief explanatory description, and five individual sliders for Base, Title, Headings, Quote, and Quote (Large) sizes, each with a corresponding numeric value display.

• Slider

Super

A row of three buttons for handling unsaved changes: Cancel, Discard, and Save. The Save button is highlighted as the primary action.

• Button group

Super

A color picker modal

• Color picker

Super

An open dropdown menu displaying a list of color palette options. The 'Default' option is currently selected, indicated by an orange checkmark.

• Input select