No Integrations State

About this block

No Integrations State is the empty surface shown before any tools are connected, a Plug icon header, the line Connect your tools once and Acme keeps everything in sync, three bullet unlocks (sync issues, route alerts, trigger deploys), a Browse integrations button, and a quick-connect strip at the bottom with Slack, GitHub, and Jira chips.

Unlocks and popular integrations are separate const arrays. The quick-connect chips use aria-pressed-ready button elements so adding real OAuth handlers needs no markup change.

When to use

Reach for this block on the integrations index page when the workspace has zero connected tools. Wire the Browse integrations button to your catalog route and each chip to its OAuth entry point.

A natural flow around it on an Application Pro page:

Before

• App shell

After

• Integrations list
• Settings page

What you can display

One strong use is the first-time integrations surface. Other empty states in this shape:

• Webhooks empty. Same layout, unlocks list describes event types, chips are common endpoint targets.
• OAuth apps empty. Chips are the apps users most often grant access to.
• Data sources empty. Unlocks describe reporting and export capabilities that open up after connection.

Tip: name what integrations unlock before asking for the click, the why earns the OAuth prompt.