Integrations Hub
Your product at the center, integrations on two orbits, and data packets travelling along curved cables.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Hover a node to light its cable and see what it syncs; click it to connect or disconnect, and the cable goes dark when it's off.
Installation
$ npx shadcn@latest add https://guetix.com/r/integrations-hub.json
Uses the shadcn CLI. It creates components/guetix/integrations-hub.tsx and installs nothing else.
Usage
example.tsx
import { IntegrationsHub } from "@/components/guetix/integrations-hub";
export default function Example() {
return <IntegrationsHub />;
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { id; name; glyph; color; syncs }[] | — | Integrations. |
| brand | string | — | Hub label. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Each node is a toggle button with a full label; status is announced.