> ## Documentation Index
> Fetch the complete documentation index at: https://docs.superblocks.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Integrations library

> Connect Superblocks to any databases, third-party SaaS services, or internal REST / GraphQL APIs

export const IntegrationGrid = () => {
  const integrations = [{
    name: 'Airtable',
    slug: 'airtable',
    icon: 'https://integrations.superblocks.com/img/airtable.png'
  }, {
    name: 'Amazon Athena',
    slug: 'aws-athena',
    icon: 'https://integrations.superblocks.com/img/athena.png'
  }, {
    name: 'Amazon DynamoDB',
    slug: 'aws-dynamodb',
    icon: 'https://integrations.superblocks.com/img/dynamodb.png'
  }, {
    name: 'Amazon Redshift',
    slug: 'aws-redshift',
    icon: 'https://integrations.superblocks.com/img/redshift.png'
  }, {
    name: 'Amazon S3',
    slug: 'aws-s3',
    icon: 'https://integrations.superblocks.com/img/s3.png'
  }, {
    name: 'Anthropic',
    slug: 'anthropic',
    icon: 'https://integrations.superblocks.com/img/anthropic.png'
  }, {
    name: 'Asana',
    slug: 'asana',
    icon: 'https://integrations.superblocks.com/img/asana.png'
  }, {
    name: 'Bitbucket',
    slug: 'bitbucket',
    icon: 'https://integrations.superblocks.com/img/bitbucket.png'
  }, {
    name: 'Box',
    slug: 'box',
    icon: 'https://integrations.superblocks.com/img/box.png'
  }, {
    name: 'CircleCI',
    slug: 'circleci',
    icon: 'https://integrations.superblocks.com/img/circleci.png'
  }, {
    name: 'CockroachDB',
    slug: 'cockroachdb',
    icon: 'https://integrations.superblocks.com/img/cockroach.png'
  }, {
    name: 'Cohere',
    slug: 'cohere',
    icon: 'https://integrations.superblocks.com/img/cohere.png'
  }, {
    name: 'Confluence Cloud',
    slug: 'confluence',
    icon: 'https://integrations.superblocks.com/img/confluence.png'
  }, {
    name: 'Azure CosmosDB',
    slug: 'cosmosdb',
    icon: 'https://integrations.superblocks.com/img/cosmosdb.png'
  }, {
    name: 'Couchbase',
    slug: 'couchbase',
    icon: 'https://integrations.superblocks.com/img/couchbase.png'
  }, {
    name: 'Datadog',
    slug: 'datadog',
    icon: 'https://integrations.superblocks.com/img/datadog.png'
  }, {
    name: 'Databricks',
    slug: 'databricks',
    icon: 'https://integrations.superblocks.com/img/databricks.png'
  }, {
    name: 'Dropbox',
    slug: 'dropbox',
    icon: 'https://integrations.superblocks.com/img/dropbox.png'
  }, {
    name: 'Elasticsearch',
    slug: 'elasticsearch',
    icon: 'https://integrations.superblocks.com/img/elasticsearch.png'
  }, {
    name: 'Fireworks AI',
    slug: 'fireworks',
    icon: 'https://integrations.superblocks.com/img/fireworks.png'
  }, {
    name: 'Front',
    slug: 'front',
    icon: 'https://integrations.superblocks.com/img/front.png'
  }, {
    name: 'Gemini',
    slug: 'gemini',
    icon: 'https://integrations.superblocks.com/img/gemini.png'
  }, {
    name: 'GitHub',
    slug: 'github',
    icon: 'https://integrations.superblocks.com/img/github.png'
  }, {
    name: 'Google Analytics',
    slug: 'google-analytics',
    icon: 'https://integrations.superblocks.com/img/google-analytics.png'
  }, {
    name: 'GraphQL',
    slug: 'graphql',
    icon: 'https://integrations.superblocks.com/img/graphql.png'
  }, {
    name: 'Google BigQuery',
    slug: 'google-bigquery',
    icon: 'https://integrations.superblocks.com/img/bigquery.png'
  }, {
    name: 'Google Cloud Storage',
    slug: 'google-cloud-storage',
    icon: 'https://integrations.superblocks.com/img/gcs.png'
  }, {
    name: 'Google Drive',
    slug: 'google-drive',
    icon: 'https://integrations.superblocks.com/img/googledrive.png'
  }, {
    name: 'Groq',
    slug: 'groq',
    icon: 'https://integrations.superblocks.com/img/groq.png'
  }, {
    name: 'HubSpot',
    slug: 'hubspot',
    icon: 'https://integrations.superblocks.com/img/hubspot.png'
  }, {
    name: 'Intercom',
    slug: 'intercom',
    icon: 'https://integrations.superblocks.com/img/intercom.png'
  }, {
    name: 'Jira Cloud',
    slug: 'jira',
    icon: 'https://integrations.superblocks.com/img/jira.png'
  }, {
    name: 'LaunchDarkly',
    slug: 'launchdarkly',
    icon: 'https://integrations.superblocks.com/img/launchdarkly.png'
  }, {
    name: 'MariaDB',
    slug: 'mariadb',
    icon: 'https://integrations.superblocks.com/img/mariadb.png'
  }, {
    name: 'Mistral AI',
    slug: 'mistral',
    icon: 'https://integrations.superblocks.com/img/mistral.png'
  }, {
    name: 'MongoDB',
    slug: 'mongodb',
    icon: 'https://integrations.superblocks.com/img/mongodb.png'
  }, {
    name: 'Microsoft SQL Server',
    slug: 'mssql',
    icon: 'https://integrations.superblocks.com/img/mssql.png'
  }, {
    name: 'MySQL',
    slug: 'mysql',
    icon: 'https://integrations.superblocks.com/img/mysql.png'
  }, {
    name: 'Notion',
    slug: 'notion',
    icon: 'https://integrations.superblocks.com/img/notion.png'
  }, {
    name: 'OpenAI',
    slug: 'openai',
    icon: 'https://integrations.superblocks.com/img/openai_logo.png'
  }, {
    name: 'PagerDuty',
    slug: 'pagerduty',
    icon: 'https://integrations.superblocks.com/img/pagerduty.png'
  }, {
    name: 'Perplexity',
    slug: 'perplexity',
    icon: 'https://integrations.superblocks.com/img/perplexity.png'
  }, {
    name: 'PostgreSQL',
    slug: 'postgres',
    icon: 'https://integrations.superblocks.com/img/postgres.png'
  }, {
    name: 'REST API',
    slug: 'rest-api',
    icon: 'https://integrations.superblocks.com/img/restapi.png'
  }, {
    name: 'Salesforce',
    slug: 'salesforce',
    icon: 'https://integrations.superblocks.com/img/salesforce.png'
  }, {
    name: 'Segment',
    slug: 'segment',
    icon: 'https://integrations.superblocks.com/img/segment.png'
  }, {
    name: 'SendGrid',
    slug: 'sendgrid',
    icon: 'https://integrations.superblocks.com/img/sendgrid.png'
  }, {
    name: 'Slack',
    slug: 'slack',
    icon: 'https://integrations.superblocks.com/img/slack.png'
  }, {
    name: 'Snowflake Warehouse',
    slug: 'snowflake',
    icon: 'https://integrations.superblocks.com/img/snowflake.png'
  }, {
    name: 'Snowflake Cortex',
    slug: 'snowflake-cortex',
    icon: 'https://integrations.superblocks.com/img/snowflake.png'
  }, {
    name: 'Snowflake Postgres',
    slug: 'snowflake-postgres',
    icon: 'https://integrations.superblocks.com/img/snowflake.png'
  }, {
    name: 'Stability AI',
    slug: 'stabilityai',
    icon: 'https://integrations.superblocks.com/img/stabilityai.png'
  }, {
    name: 'Stripe',
    slug: 'stripe',
    icon: 'https://integrations.superblocks.com/img/stripe.png'
  }, {
    name: 'Twilio',
    slug: 'twilio',
    icon: 'https://integrations.superblocks.com/img/twilio.png'
  }, {
    name: 'Zendesk',
    slug: 'zendesk',
    icon: 'https://integrations.superblocks.com/img/zendesk.png'
  }, {
    name: 'Zoom',
    slug: 'zoom',
    icon: 'https://integrations.superblocks.com/img/zoom.png'
  }];
  const [searchQuery, setSearchQuery] = useState('');
  const filteredIntegrations = useMemo(() => {
    if (!searchQuery.trim()) {
      return integrations;
    }
    const query = searchQuery.toLowerCase();
    return integrations.filter(integration => integration.name.toLowerCase().includes(query));
  }, [searchQuery]);
  return <div>
      {}
      <div style={{
    marginBottom: '20px',
    position: 'relative'
  }}>
        <input type="text" placeholder="Search for an integration" value={searchQuery} onChange={e => setSearchQuery(e.target.value)} style={{
    width: '100%',
    padding: '10px 14px 10px 38px',
    fontSize: '14px',
    border: '1px solid var(--superblocks-dark-100)',
    borderRadius: '8px',
    outline: 'none',
    transition: 'border-color 0.2s ease'
  }} onFocus={e => {
    e.currentTarget.style.borderColor = 'var(--superblocks-accent-blue)';
  }} onBlur={e => {
    e.currentTarget.style.borderColor = 'var(--superblocks-dark-100)';
  }} />
        <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" style={{
    position: 'absolute',
    left: '12px',
    top: '50%',
    transform: 'translateY(-50%)',
    pointerEvents: 'none',
    color: 'var(--superblocks-dark-300)'
  }}>
          <path d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          <path d="M19 19L14.65 14.65" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </div>

      {}
      {searchQuery && <p style={{
    marginBottom: '20px',
    color: 'var(--superblocks-dark-600)',
    fontSize: '14px'
  }}>
          {filteredIntegrations.length} {filteredIntegrations.length === 1 ? 'integration' : 'integrations'} found
        </p>}

      {}
      <div className="integration-grid-container" style={{
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))',
    gap: '16px',
    marginTop: searchQuery ? '0' : '32px',
    marginBottom: '32px'
  }}>
        {filteredIntegrations.map(integration => <a key={integration.slug} href={`/integrations/integrations-library/${integration.slug}`} className="integration-card" style={{
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  }}>
            <div style={{
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center'
  }}>
              <img src={integration.icon} alt={integration.name} style={{
    width: '40px',
    height: '40px',
    margin: '8px 0 8px 0',
    flexShrink: 0,
    pointerEvents: 'none',
    display: 'block'
  }} />
              <span style={{
    color: 'var(--superblocks-dark-900)',
    fontWeight: '500',
    fontSize: '13px',
    textAlign: 'center'
  }}>
                {integration.name}
              </span>
            </div>
          </a>)}
      </div>

      {}
      {searchQuery && filteredIntegrations.length === 0 && <div style={{
    textAlign: 'center',
    padding: '48px 24px',
    color: 'var(--superblocks-dark-600)'
  }}>
          <p style={{
    fontSize: '16px',
    margin: '0 0 8px 0'
  }}>No integrations found</p>
          <p style={{
    fontSize: '14px',
    margin: 0
  }}>Try adjusting your search terms</p>
        </div>}
    </div>;
};

<IntegrationGrid />