Integrations

Anbindungen als Raster, Umlaufbahn, durchsuchbare Liste, Flussbild und Laufband. Dienste ohne Logo bekommen ein neutrales, gezeichnetes Zeichen.

5 Variants

Kategorie wechseln

Raster

Ein lückenloses Raster mit Monogramm, Kategorie, Beschreibung und Status.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/integrations

Bringt mit utils, kit, button, icon, section, reveal

Usage

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

Source

Umlaufbahn

Zwei langsame Ringe aus Diensten um dein Produkt. Ruhig bei reduzierter Bewegung.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/integrations

Bringt mit utils, kit, button, icon, section, reveal

Usage

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

Source

Filterbare Liste

Suche, Kategorien mit Anzahl und ein Verbinden-Knopf in jeder Zeile.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/integrations

Bringt mit utils, kit, button, icon, section, reveal

Usage

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

Source

Knoten mit Linien

Daten fließen von Quellen durch dein Produkt zu Zielen, gezeichnet in SVG.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/integrations

Bringt mit utils, kit, button, icon, section, reveal

Usage

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

Source

Laufband

Zwei Reihen laufen gegeneinander und halten beim Darüberfahren an.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/integrations

Bringt mit utils, kit, button, icon, section, reveal

Usage

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

Source

Details

Was Integrationen mitbringt, aus Registry und Quellcode gelesen.

Bereich: Content
Variants: 5
Version: 1.0.2 · seit 1.0.0
Datei: components/ui/integrations.tsx
Bringt mit: utilskitbutton iconsectionreveal
npm-Pakete: Keine
Sprachen: Englisch und Deutsch, 11 eigene Texte
Studio: Alle 5 Variants bearbeitbar
Mit KI bauen: Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle IntegrationsProps aus components/ui/integrations.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

variantoptional
IntegrationsVariant
gridorbitfilterable-listhub-linesmarquee
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
integrationsPflicht
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 }

Eingebaute Texte

Diese Texte schreibt Integrationen selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 11 Texte anzeigen

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

Aus dem Quellcode der Component abgeleitet.

Setzt aria-label, aria-live und aria-pressed, damit Screenreader Zweck und Zustand ansagen.
Nutzt die Rolle group.
Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
Jedes Feld hat ein Label, sichtbar oder für Screenreader.
Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 18 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Integrationen?

Mit aiw add @ai-website/integrations. Der Befehl legt die Datei components/ui/integrations.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, section und reveal. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Integrationen?

5 Varianten, Raster, Umlaufbahn, Filterbare Liste, Knoten mit Linien und Laufband. Du wählst sie mit der Prop variant, zum Beispiel variant="orbit".

Kann ich die Texte von Integrationen übersetzen?

Ja. Integrationen bringt 11 eigene Texte auf Deutsch und Englisch mit, etwa „Integrationen durchsuchen“, „Alle“ und „Verbinden“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Integrationen einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Integrationen mit aiw_components und installieren sie mit aiw_add @ai-website/integrations. Nenn im Prompt die Variante, etwa variant="grid", dann schreibt der Assistent deine Inhalte direkt in die Props.

Kann ich Integrationen ohne Code anpassen?

Ja, im Studio. Alle 5 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden Integrations-Code zum Kopieren.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Integrations stehen.

Integrationen

Raster

Umlaufbahn

Filterbare Liste

Knoten mit Linien

Laufband

Details

Props

Eingebaute Texte

Barrierefreiheit

Bewegung

Häufige Fragen

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit