Integration Showcase Pro for HubSpot

Searchable, filterable integration directory in three layouts. Category tabs, detail modals, badges, and complete style control from the editor.

Demo 1 — Grid, 4 Columns, Zero Gap

Monochrome Directory

Collapsed-border table look. 4 columns, zero gap, zero radius, no shadow. Geist font, monochrome palette. Filter pills with square corners. Left-aligned content.

Integrations

8 integrations

Salesforce

Bi-directional contact and deal sync.

HubSpot

Native CRM data sync and workflows.

Slack

Real-time notifications in channels.

Stripe

Payment processing and subscription billing.

GitHub

Source control and CI/CD pipelines.

Figma

Design token sync and asset export.

Salesforce Marketing

Marketing automation and lead scoring.

HubSpot Marketing

Inbound marketing tools and analytics.

No integrations match your search.

Demo 2 — Grid, 3 Columns, Left-Aligned

SaaS App Directory

Clean 3-column grid, left-aligned cards with rounded corners and soft shadow. Inter font, blue accent on filters and badges. Search + filters + count. Load More at 6.

Our Integrations

Connect with the tools your team already uses

Request Integration
6 integrations

Salesforce

Popular

Bi-directional sync for contacts, deals, and activities across platforms.

HubSpot

Native CRM integration with custom objects and workflow automation.

Slack

Real-time notifications and alerts directly in your team channels.

Stripe

New

Accept payments, manage subscriptions, and track revenue metrics.

GitHub

Source control integration with deployment tracking and webhooks.

Figma

Sync design tokens and components from your design files.

No integrations match your search.

Demo 3 — List Layout, Editorial

Creative Tool Integrations

Horizontal list cards on light gray. DM Sans, 44px logos, soft shadow. Search only, no filter tabs. All entries visible. Arrow appears on hover.

Creative Integrations

Tools for designers, writers, and creative teams

See All Partners

Figma

Popular

Sync design tokens, export assets, and keep your design system aligned with production code.

Slack

Share design reviews, get feedback notifications, and collaborate in real time.

GitHub

Version control for design assets and automated deployment pipelines.

Salesforce

New

Sync client project data and creative briefs from your CRM automatically.

Stripe

Invoice clients and collect payments for creative projects and retainers.

HubSpot

Publish creative assets and content directly to your HubSpot website pages.

No integrations match your search.

Demo 4 — Grid 2 Columns, Dark

Developer Platform

Wide 2-column grid on dark background. DM Sans, left-aligned, purple active filters, teal badges. Large cards with 32px padding and visible borders. Search + filters.

Platform Connectors

Infrastructure, monitoring, and developer experience

View API Docs
6 integrations

GitHub

Popular

Trigger deployments and run CI pipelines from push events and pull requests.

Salesforce

Enterprise SSO and identity management with SAML and OAuth support.

Stripe

Payment event monitoring with real-time alerts and anomaly detection.

Figma

New

Design-to-code pipeline with automated asset generation and deployment.

Slack

Incident alerts and on-call routing with escalation policies.

HubSpot

CRM-integrated access control and user provisioning.

No integrations match your search.

Demo 5 — Compact, Enterprise Navy

Enterprise Partner Grid

Compact logo + name grid on dark navy. Libre Baskerville serif heading, gold accents. 4 columns, no descriptions, no modals. Filter tabs + count only.

Technology Partners

Trusted by enterprise teams worldwide

Become a Partner
12 integrations

Salesforce

HubSpot

Slack

Stripe

GitHub

Figma

Salesforce Cloud

HubSpot CMS

Slack Enterprise

Stripe Connect

GitHub Actions

Figma Dev Mode

No integrations match your search.

Setup & Configuration

Integration Showcase Pro displays your app ecosystem in a searchable, filterable directory. Add integrations via the repeater in the Content tab, configure categories, and style everything from the Style tab.

Adding Integrations

Each entry supports a logo image (or auto-generated initial placeholder), name, category for filtering, short card description, rich text detail for the modal, external link, optional badge label, and a featured toggle that pins entries to the top of the grid.

Categories

Manage filter tabs via the Categories repeater. The first entry with an empty slug acts as the "All" tab. Other entries define filterable categories with a label and slug. The slug must match the category text on your integration entries.

Card Alignment

Grid layout supports center or left alignment for card content. Left alignment works best with descriptions, center works well for logo-focused grids.

Layout Modes

  • Grid: 2, 3, or 4 columns. Center or left aligned. Responsive to 2 columns on tablet, 1 on mobile.
  • List: Horizontal cards with logo left, content right. Single column. Best for fewer integrations with longer descriptions.
  • Compact: Logo + name only, no descriptions. Tight multi-column grid for partner pages with many logos.

Card Click Behavior

  • Modal: Centered detail dialog with logo, description, and link. Keyboard accessible with Escape to close.
  • Link: Opens the integration URL in a new tab.
  • None: Cards are not interactive.

Style System

60+ style fields covering every visual property. Section backgrounds span full width with centered content containers. All from the Style tab, nothing hardcoded.

  • Colors (35 fields): section bg, card bg/border/hover, all text colors, search input (bg, text, border, placeholder), filter pills (default + active), badges, count, modal (bg, overlay, title, text, border, heading, list), modal button (bg, text, hover), CTA link colors, Load More button (bg, text, border).
  • Typography (12 fields): heading and body Google Font pickers with theme inheritance, plus sizes for heading, subheading, name, description, category, badge, search, count, modal title, and modal text.
  • Card (12 fields): border radius, padding, gap between cards, shadow and hover shadow (4 levels each), logo size, logo radius, logo border color, arrow button size, card content gap.
  • Load More (4 fields): border radius, horizontal and vertical padding, font size.
  • Toolbar (7 fields): search radius and padding, filter pill radius, horizontal and vertical padding, gap, toolbar row gap.
  • Badge (3 fields): radius, horizontal and vertical padding.
  • Modal (12 fields): radius, padding, width, shadow, logo size, button font size, button horizontal and vertical padding, button radius, button shadow.
  • Spacing (4 fields): section padding top and bottom, heading margin, toolbar margin.
  • Responsive (2 fields): tablet and mobile breakpoints.

Technical Details

  • Zero dependencies: vanilla JavaScript, no external libraries
  • Instance isolation: all CSS scoped per instance, multiple modules per page
  • Accessible: ARIA attributes, keyboard navigation, focus trap in modals
  • GPU-optimized: transitions use transform and opacity only
  • Any template: website pages and landing pages, no theme required
Integration Showcase Pro by Studio Nope