# Modern SaaS Integration: App Tile Field

A field of square tiles with fifteen real app glyphs scattered through it, cleared in the middle for a centered heading, lede and pill.

- Page: https://www.shadcn-ui-blocks.com/blocks/modern-saas/integrations/app-tile-field
- Collection: [Modern SaaS](https://www.shadcn-ui-blocks.com/blocks/modern-saas), Premium tier
- Group: [Integrations](https://www.shadcn-ui-blocks.com/blocks/modern-saas/integrations)
- Created: 2026-11-02
- Preview image: https://www.shadcn-ui-blocks.com/blocks/modern-saas/integrations/app-tile-field.png

## Install

```bash
npx shadcn@latest add @shadcn-ui-blocks/modern-saas-integrations-app-tile-field
```

Needs an API key from a Pro or Team plan: add `@shadcn-ui-blocks` to the registries in components.json with the key as an `Authorization: Bearer` header. Setup: https://www.shadcn-ui-blocks.com/docs/shadcn-cli. The MCP server installs it without the setup: https://www.shadcn-ui-blocks.com/docs/mcp.

## Depends on

- npm packages: @icons-pack/react-simple-icons, class-variance-authority, radix-ui
- shadcn/ui components: brand-icons, depth-button, surface
- Installs to: `@/components/blocks/modern-saas/integrations/app-tile-field`

## About this block

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](https://www.shadcn-ui-blocks.com/blocks/modern-saas/feature-sections) that show what
  the product does with the data
- [Testimonials](https://www.shadcn-ui-blocks.com/blocks/modern-saas/testimonials) from teams who run it
  every day

**After**

- [Pricing sections](https://www.shadcn-ui-blocks.com/blocks/modern-saas/pricing-sections) that say which
  plans include which apps
- [FAQs](https://www.shadcn-ui-blocks.com/blocks/modern-saas/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.

## More in Modern SaaS Integrations

- [Connect Your Stack](https://www.shadcn-ui-blocks.com/blocks/modern-saas/integrations/connect-your-stack)
- [Connector Directory](https://www.shadcn-ui-blocks.com/blocks/modern-saas/integrations/connector-directory)
- [Icon Tile Spotlight](https://www.shadcn-ui-blocks.com/blocks/modern-saas/integrations/icon-tile-spotlight)