Tween UITween UI
7

Blocks

Integration Hub

A hub-and-spoke diagram that draws paths to partner logos, then sends dots along the lines.

A ready-made integrations block. The center hub pops in, paths draw out to six logos, then a dot travels each line. GSAP-driven (MotionPathPlugin).

New tab

One hub for every integration

Connect Notion, Zoom, Stripe, and the rest of your stack without leaving your product.

Telegram
Google
Notion
Reddit
Stripe
Zoom

Installation

pnpm dlx shadcn@latest add @tween-ui/integration-hub

Usage

app/page.tsx
app/page.tsx
import IntegrationHub from '@/components/tweenui/integration/integration-hub';
 
export default function Page() {
  return <IntegrationHub />;
}

Pass your own logos:

app/page.tsx
app/page.tsx
import IntegrationHub from '@/components/tweenui/integration/integration-hub';
 
export default function Page() {
  return (
    <IntegrationHub
      left={[
        { src: '/logos/slack.svg', alt: 'Slack' },
        { src: '/logos/github.svg', alt: 'GitHub' },
        { src: '/logos/figma.svg', alt: 'Figma' },
      ]}
      right={[
        { src: '/logos/linear.svg', alt: 'Linear' },
        { src: '/logos/notion.svg', srcDark: '/logos/notion-dark.svg', alt: 'Notion' },
        { src: '/logos/zoom.svg', alt: 'Zoom' },
      ]}
    />
  );
}

Props

PropTypeDefaultDescription
titleReactNodesample headingSection heading.
descriptionstringsample lineSupporting line under the heading.
left{ src, srcDark?, alt }[]Telegram, Google, NotionThree logos on the left.
right{ src, srcDark?, alt }[]Reddit, Stripe, ZoomThree logos on the right.

Extends native <section> attributes (className, style, …).

Accessibility

Each logo keeps its alt text. Paths and traveling dots are decorative (aria-hidden). Under prefers-reduced-motion: reduce the hub and logos land in place with no path draw or looping dots.