Connect Tools Step

About this block

Connect Tools Step is the integrations screen of an onboarding flow, four tiles in a ruled list: Slack, GitHub, Calendar, and Drive. Slack is already shown connected with a secondary Connected badge and a Done checkmark in place of its Connect button. The footer note points forward honestly: you can add, remove, or reconfigure any integration from Settings > Integrations at any time.

Integrations are one typed array with a connected flag driving the badge, checkmark, and button swap per row. Showing one item already done resets the cognitive load of a four-item list to three.

When to use

Reach for this block on the tools step of a new-user onboarding wizard, wired to your OAuth connect endpoints per integration. The Skip for now and Continue buttons at the foot let users move at their own pace.

A natural flow around it on an Application Pro page:

Before

• Import data step

After

• Finish setup card
• Integrations settings

What you can display

One strong use is the initial tool-connection step. Other connect-tools panels:

• Narrower set. Two tiles for a focused product that only supports one or two integrations at launch.
• Re-connect state. One tile shown with an error badge and a Reconnect button instead of Connected.
• Settings view. The same shape reused on an integrations settings page with a full list of options.

Tip: one pre-connected tile teaches the pattern and makes the remaining items feel like one click each.