Integrations page template for SaaS apps

What does this integrations page template include?

A connected apps section with a card grid showing each integration's logo, description, connected status indicator, and a configure link, and an available integrations section with cards for services not yet set up, each with a connect link.

How are the integration cards organized on this settings page?

Connected integrations appear first in their own section, since these are what the team actively uses. Available integrations appear in a second section below. Within each section, cards are in a grid so the page stays scannable as the number of integrations grows.

Which settings templates make up the full settings surface?

Six templates cover the settings surfaces of a SaaS product: the account settings page for profile photo, personal details, and display preferences, the workspace settings page for workspace name, URL, and ownership transfer, the team members page for inviting members, assigning user roles, and managing seats, the API keys page for live and test API keys and a webhook secret, the integrations page for connected apps and available services, and the security settings page for password, two factor authentication, active sessions, and SSO.

Does this integrations template support both OAuth and webhook integrations?

Yes. The card layout works for both OAuth based connected apps and webhook based integrations. The configure link on connected cards opens whichever configuration the integration needs. The description on each card can explain whether the integration uses OAuth or a webhook.

Which vibe coding tools work with this integrations page template?

Claude Code, Replit, Lovable, ChatGPT Codex, Bolt, and Cursor. Paste it in and describe the integrations you want to show, the logos, and the descriptions.