Modern SaaS Integration: App Tile Field

App Tile Field shows the tools a product connects to as a field of square tiles, twelve across and seven down, with a few corners missing so it reads as cut from a larger grid. Fifteen tiles carry real app glyphs from Simple Icons, among them Slack, GitHub, HubSpot, Jira and Zendesk, and the rest are quiet tile washes.

The middle of the field is cleared for a centered heading: a one line title, a two line lede that names the apps, and a ghost pill that leads to the full directory.

When to use

Use it on a landing page or an integrations page when the number and the names of the apps matter more than how each one works. The field fills a screen on its own, so it suits a section that should stop the scroll for a moment.

A natural flow around it on a Modern SaaS page:

Before

• Feature Sections that show what the product does with the data
• Testimonials from teams who run it every day

After

• Pricing sections that say which plans include which apps
• FAQs to answer setup questions

What you can customize

• Apps. Edit the apps array: a name, a glyph and its row and column in the field. Glyphs come from @icons-pack/react-simple-icons; Slack is in components/ui/brand-icons.tsx.
• Field. ROWS, COLS, the gone corners and isHole set the shape. Keep the hole at least six tiles wide and three tall so the heading fits.
• Small screens. Below xl the heading leads and the app tiles follow in a grid, five across from sm and three on phones.

Tip: spread the app tiles so no two touch, and keep one in each corner of the field, so it reads as full without crowding the heading.