Integrations

Connections and tools as a grid, an orbit, a searchable list, a flow diagram and a marquee. Services without a logo get a neutral drawn mark.

5 variants

Switch category

Grid

A seamless grid with monogram, category, description and status.

Open in Studio

Installv1.0.2

aiw add @ai-website/integrations

Brings along utils, kit, button, icon, section, reveal

Usage

<Integrations variant="grid" integrations={[{ name, category, description, logo }]} />

Source

Orbit

Two slow rings of services around your product. Still with reduced motion.

Open in Studio

Installv1.0.2

aiw add @ai-website/integrations

Brings along utils, kit, button, icon, section, reveal

Usage

<Integrations variant="orbit" hub={{ name: "Northwind" }} integrations={…} />

Source

Filterable list

Search, categories with counts and a connect button on every row.

Open in Studio

Installv1.0.2

aiw add @ai-website/integrations

Brings along utils, kit, button, icon, section, reveal

Usage

<Integrations variant="filterable-list" integrations={…} />

Source

Hub with lines

Data flows from sources through your product to destinations, drawn in SVG.

Open in Studio

Installv1.0.2

aiw add @ai-website/integrations

Brings along utils, kit, button, icon, section, reveal

Usage

<Integrations variant="hub-lines" hub={{ name }} integrations={[…sources, …destinations]} />

Source

Marquee

Two rows drift in opposite directions and pause on hover.

Open in Studio

Installv1.0.2

aiw add @ai-website/integrations

Brings along utils, kit, button, icon, section, reveal

Usage

<Integrations variant="marquee" integrations={…} />

Source

Details

What Integrations brings along, read from the registry and the source.

Area: Content
Variants: 5
Version: 1.0.2 · since 1.0.0
File: components/ui/integrations.tsx
Brings along: utilskitbutton iconsectionreveal
npm packages: None
Languages: English and German, 11 texts of its own
Studio: All 5 variants editable
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The IntegrationsProps interface from components/ui/integrations.tsx, with the comments from the code.

variantoptional
IntegrationsVariant
gridorbitfilterable-listhub-linesmarquee
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
integrationsrequired
Integration[]
huboptional
{ name: string; logo?: React.ReactNode; /** A short line under the name in hub-lines */ note?: string }
The product in the middle of orbit and hub-lines
flowoptional
'through' | 'exchange'
hub-lines: impulses run from the sources through the hub to the destinations (through), or from every service into the hub and back (exchange, without side captions)
actionoptional
{ label: string; href: string }

Built-in texts

Integrations writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 11 texts

Key	English	German
search	English Search integrations	German Integrationen durchsuchen
all	English All	German Alle
connect	English Connect	German Verbinden
connected	English Connected	German Verbunden
empty	English No integration matches “{q}”.	German Keine Integration passt zu „{q}“.
clear	English Clear search	German Suche leeren
results	English {n} integrations	German {n} Integrationen
sources	English Sources	German Quellen
destinations	English Destinations	German Ziele
filter	English Filter by category	German Nach Kategorie filtern
view	English View {name}	German {name} ansehen

Read from the source of the component.

Sets aria-label, aria-live and aria-pressed, so screen readers announce purpose and state.
Uses the role group.
Announces changes through a live region without moving focus.
Every field has a label, visible or for screen readers.
Adds text for screen readers where icons and graphics stand alone.
Shows a visible focus ring when used with the keyboard.
The server renders the starting state in full, JavaScript only adds the interaction.

Motion

Rises in briefly the first time it comes into view (kit-rise, useInView).
Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 18 places in the code switch motion off then.

Frequent questions

How do I install Integrations?

With aiw add @ai-website/integrations. The command puts components/ui/integrations.tsx into your project, the code is yours from then on. It brings along button, icon, section and reveal. It needs no further npm packages.

Which variants does Integrations have?

5 variants, Grid, Orbit, Filterable list, Hub with lines and Marquee. You pick one with the variant prop, for example variant="orbit".

Can I translate the texts of Integrations?

Yes. Integrations carries 11 texts of its own in English and German, such as “Search integrations”, “All” and “Connect”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Integrations?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Integrations with aiw_components and install it with aiw_add @ai-website/integrations. Name the variant in your prompt, for example variant="grid", and the assistant writes your content straight into the props.

Can I adjust Integrations without code?

Yes, in the Studio. All 5 variants are editable there, texts, lists and switches. The Studio writes the matching Integrations code to copy.

Similar components

More from Content, the same area of the kit.

Often combined with

Sections that usually sit next to Integrations on a page.

Integrations

Grid

Orbit

Filterable list

Hub with lines

Marquee

Details

Props

Built-in texts

Accessibility

Motion

Frequent questions

Similar components, Often combined with

Similar components

Often combined with