Integrations

Open source

Integration sections — a card grid, a split layout, a marquee and an orbit diagram.

resources/views/blocks/integrations-marquee.blade.php Blade

@props([
    'eyebrow' => 'Integrations',
    'heading' => 'Works with the tools you already use',
    'subheading' => 'Connect your stack in minutes. Native integrations keep data flowing both ways — no glue code, no maintenance.',
    'rowOne' => null,
    'rowTwo' => null,
])

@php
    $rowOne ??= [
        ['name' => 'Stripe', 'initials' => 'St'],
        ['name' => 'Slack', 'initials' => 'Sl'],
        ['name' => 'GitHub', 'initials' => 'Gh'],
        ['name' => 'Notion', 'initials' => 'No'],
        ['name' => 'Figma', 'initials' => 'Fi'],
        ['name' => 'Linear', 'initials' => 'Li'],
        ['name' => 'Vercel', 'initials' => 'Ve'],
    ];

    $rowTwo ??= [
        ['name' => 'Zapier', 'initials' => 'Za'],
        ['name' => 'Segment', 'initials' => 'Se'],
        ['name' => 'HubSpot', 'initials' => 'Hu'],
        ['name' => 'Datadog', 'initials' => 'Da'],
        ['name' => 'Sentry', 'initials' => 'Sn'],
        ['name' => 'Intercom', 'initials' => 'In'],
        ['name' => 'Airtable', 'initials' => 'Ai'],
    ];
@endphp

<x-ui.section space="xl" class="overflow-hidden" {{ $attributes }}>
    <div class="mx-auto max-w-3xl px-4 text-center">
        <x-ui.badge variant="secondary" class="mb-6">{{ __($eyebrow) }}</x-ui.badge>

        <h2 class="text-balance text-3xl font-bold tracking-tight sm:text-4xl">
            {{ __($heading) }}
        </h2>

        <p class="mx-auto mt-4 max-w-2xl text-pretty text-lg text-muted-foreground">
            {{ __($subheading) }}
        </p>
    </div>

    <div class="mx-auto mt-12 max-w-6xl space-y-4 px-4">
        <x-ui.marquee :pauseOnHover="true" :duration="40" gap="1rem">
            @foreach ($rowOne as $logo)
                <div
                    class="flex items-center gap-4 rounded-lg border border-border bg-card px-6 py-6 text-card-foreground shadow-sm transition-colors hover:bg-muted"
                >
                    <span
                        class="flex size-9 shrink-0 items-center justify-center rounded-md bg-muted text-sm font-semibold text-muted-foreground"
                        aria-hidden="true"
                    >{{ $logo['initials'] }}</span>
                    <span class="whitespace-nowrap text-sm font-medium">{{ __($logo['name']) }}</span>
                </div>
            @endforeach
        </x-ui.marquee>

        <x-ui.marquee direction="right" :pauseOnHover="true" :duration="48" gap="1rem">
            @foreach ($rowTwo as $logo)
                <div
                    class="flex items-center gap-4 rounded-lg border border-border bg-card px-6 py-6 text-card-foreground shadow-sm transition-colors hover:bg-muted"
                >
                    <span
                        class="flex size-9 shrink-0 items-center justify-center rounded-md bg-muted text-sm font-semibold text-muted-foreground"
                        aria-hidden="true"
                    >{{ $logo['initials'] }}</span>
                    <span class="whitespace-nowrap text-sm font-medium">{{ __($logo['name']) }}</span>
                </div>
            @endforeach
        </x-ui.marquee>
    </div>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/integrations-marquee

Installs these dependencies automatically:

badge marquee section

Registry contract

Install confidence

php artisan ui:add blocks/integrations-marquee writes only the generated targets below. The CLI validates each file hash before writing and prompts before replacing local changes unless --force is used.

Version: 1.0.4
License: open
Stability: stable
Contract: v1
Foundation: ≥ 1.0.0

Type	Generated target
blade	resources/views/blocks/integrations-marquee.blade.php

Registry dependencies

badge marquee section

Package dependencies

composer: jml/brok:^0.2

Use with AI

A brief for your coding agent: what the block is, the install command, how to render it, its props and the rules. Copy it, or open a prompt about this block in an assistant.

integrations-marquee.md

# Brok UI block: Integrations Marquee (`integrations-marquee`)

An integrations section with a heading, muted intro, and two auto-scrolling marquee rows of bordered logo chips with edge fade and pause-on-hover.

Brok UI is a Laravel Blade registry. `ui:add` copies this block into the app as plain Blade the app owns; it composes installed `<brok:*>` primitives and semantic design tokens.

## Install

```bash
php artisan ui:add blocks/integrations-marquee
```

## Render it

```blade
<x-blocks.integrations-marquee />
```

## Props

- `eyebrow` (string, default `Integrations`) — Small label shown above the heading inside a badge.
- `heading` (string, default `Works with the tools you already use`) — Primary section heading.
- `subheading` (string, default `Connect your stack in minutes. Native integrations keep data flowing both ways — no glue code, no maintenance.`) — Supporting paragraph under the heading.
- `row-one` (mixed|null, default `null`) — Array of {name, initials} chips for the first (left-scrolling) marquee row; falls back to a 7-item sample list when null.
- `row-two` (mixed|null, default `null`) — Array of {name, initials} chips for the second (right-scrolling) marquee row; falls back to a 7-item sample list when null.

## Use when

- Use it for an integrations section that needs continuous motion — two opposite-direction auto-scrolling rows of bordered logo chips — as a lightweight, glanceable trust signal.
- Reach for it when the integration list is long enough that scrolling reads better than a fixed grid or card layout.

## Avoid when

- Avoid it when integrations need individual Connect/Installed actions or descriptions; use integrations-grid instead.

## Rules

- Render the installed block with `<x-blocks.integrations-marquee />` and pass data through its props; edit the copied file only for structural changes.
- Keep the semantic design tokens (`bg-background`, `text-muted-foreground`); never swap in raw colour utilities.
- Keep the `data-slot` attributes and the logical (start/end) spacing so the markup still mirrors under `dir="rtl"`.

## Links

- Docs: https://brokui.dev/blocks/integrations-marquee
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/integrations-marquee.json

Ask about Integrations Marquee in

Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.

Guidance

Use when

Use it for an integrations section that needs continuous motion — two opposite-direction auto-scrolling rows of bordered logo chips — as a lightweight, glanceable trust signal.
Reach for it when the integration list is long enough that scrolling reads better than a fixed grid or card layout.

Avoid when

Avoid it when integrations need individual Connect/Installed actions or descriptions; use integrations-grid instead.

Anti-patterns

Do not replace semantic props with conflicting utility classes.
Do not remove labels, focus styles, or state attributes.

Anatomy: centered heading and subheading first marquee row scrolling left second marquee row scrolling right logo initial chip

Usage

Render the block as a component, passing data where useful:

resources/views/welcome.blade.php Blade

<x-blocks.integrations-marquee />

Built from primitives

Composes <brok:*> Semantic tokens Re-themeable RTL-ready

This block composes installed <brok:*> primitives and semantic design tokens only — it does not reimplement any primitive. Re-theme it (light, dark, admin, customer) by editing CSS variables; flip the preview to RTL to confirm it mirrors.

Source

The exact, editable file ui:add writes into your app. The preview above renders this same source — there are no preview-only blocks.