Qatalog UI components examples

Qatalog

• Hero section

Qatalog

An expanded accordion section for configuring workflow notification preferences. It displays a list of events with two columns of checkboxes, likely representing different notification channels like email and in-app.

• Checkbox & radio

Qatalog

A directory list view showing teams, with active filters applied for archived items. Includes a toolbar for filtering, finding, grouping, and adjusting columns, followed by a table header and a single list item representing an archived team.

• Sorting & filtering

Qatalog

A data table displaying a list of teams with columns for Name, Collaborators, and Last updated. It includes a toolbar with filtering, grouping, and view options, along with a top-level navigation for People, Teams, and Org.

• Table

Qatalog

A contextual menu with multiple actions.

• Dropdown menu

Qatalog

A color picker modal

• Color picker

Qatalog

• Input multi-select

Qatalog

A horizontal settings row featuring a title, a descriptive subtitle, and a toggle switch on the right side. The toggle is currently in the active (on) state.

• Toggle/Switch

Qatalog

A settings row featuring a title, descriptive text, and a segmented control to select a time frequency.

• Segmented control

Qatalog

A simple informational alert box providing context about AI instructions. It features an info icon alongside two lines of descriptive text.

• Alert

Qatalog

A toggle button with two options

• Segmented control

Qatalog

A large search input field with mode toggles for 'Ask' and 'Find' positioned above it, and a row of connected app icons below it indicating data sources.

• Input text