Home
Previous componentNext component

Integration visual

Open in fibo's Storybook

A hub and the tools wired into it. Live routes pulse, idle ones dim, and the hub opens a preview on hover.

  • Database
  • Repository
  • Chat
  • Calendar

Features

  • Three layouts: corners for up to four tools, orbit for up to eight, and sides for a pipeline with inputs on one side and outputs on the other.
  • Pulses run inward or outward along live routes. Idle tools keep their route and dim.
  • A preview opens over the hub on hover or focus. It takes any content, or an image or looping video.
  • Respects reduced motion: the pulses, halo and springs stop, and the preview fades in.

Installation

Installnpx shadcn@latest add https://fibo.toribryan.com/r/integration-visual.json
Importimport { IntegrationVisual, type IntegrationItem } from "@/components/ui/integration-visual"

It installs motion with it, for the pulses and the preview.

Usage

import { DatabaseIcon, MailIcon } from "lucide-react"
 
import { IntegrationVisual } from "@/components/ui/integration-visual"
 
export function ConnectedTools() {
  return (
    <IntegrationVisual
      label="Connected tools"
      items={[
        { title: "Database", icon: <DatabaseIcon /> },
        { title: "Email", icon: <MailIcon />, status: "idle" },
      ]}
    />
  )
}

Items fill the layout's slots in order, and any past its limit are left out. Each title names its tile for screen readers.

Each item takes:

type IntegrationItem = {
  title: string
  icon: React.ReactNode
  status?: "active" | "idle"
  side?: "in" | "out" // sides layout only
}

Anatomy

Every part the component renders, with the data-slot it carries. You pass items, center and preview; the component builds the rest.

Partdata-slotNotes
IntegrationVisualintegration-visualThe root. Carries data-layout.
plateThe dots or grid, and the routes. Decorative.
itemintegration-visual-itemOne tile per entry in items. Carries data-status.
hubintegration-visual-hubTakes focus when there's a preview.
faceintegration-visual-hub-faceShows center.
previewintegration-visual-previewAbove the hub, while it's hovered or focused.

Guidelines

  • 01Choose the layout by count: corners for four, orbit for five to eight, sides when data flows in one side and out the other.
  • 02Mark tools that aren't connected yet as idle rather than leaving them out. The diagram then shows what's possible as well as what's live.
  • 03Use pulse="inward" for sources feeding the hub and "outward" for the hub sending to them.
  • 04Name the hub with the product, a count, or a mark in center. Keep it to a word or a number.
  • 05Put it at the top of a card and let the card's text make the claim.

Examples

Media preview

Pass { src, alt } to preview for an image, an animated image, or a video that plays muted on a loop. Media is 16:9 unless you set aspectRatio. Hover or focus the snail.

  • Database
  • Repository
  • Chat
  • Calendar

Orbit

Up to eight tools, evenly spaced on an ellipse with straight spokes.

  • Database
  • Repository
  • Chat
  • Calendar
  • Email
  • Storage

Sides

A pipeline. Set side on each item to put it in the input or output column, and pulse="outward" to run the pulses from inputs to outputs.

  • Webhook
  • Database
  • Repository
  • Chat
  • Email

Idle items

Every other tool is idle: its route stays, dimmed, and carries no pulse.

  • Database
  • Repository, idle
  • Chat
  • Calendar, idle

Plates

The background prop sets the plate: dots, grid or none.

  • Database
  • Repository
  • Chat
  • Calendar
dots
  • Database
  • Repository
  • Chat
  • Calendar
grid
  • Database
  • Repository
  • Chat
  • Calendar
none

In a card

A count in the hub and the claim in the card text below it.

  • Database
  • Repository
  • Chat
  • Calendar
12
Twelve sources, one feedHover the hub to see what synced last. Routes pulse while a source is active.

Do's and don'ts

  • Database
  • Repository
  • Chat, idle
  • Email, idle
DoLet only the live routes pulse, so the motion means something.
  • Database
  • Repository
Don'tDon't use corners for two tools; the diagram looks unfinished. Use sides.

API reference

PropTypeDefaultDescription
itemsIntegrationItem[]The tools wired into the hub.
centerReact.ReactNodeA snail iconWhat names the hub. An icon element sits in a square face; a string or number is set as text and the face widens to fit. Defaults to a snail, for syncs that take their time.
previewReact.ReactNode | IntegrationPreviewMediaShown above the hub while it is hovered or focused, for looking at only. Pass any content, or { src, alt } for an image, an animated image, or a video (.mp4, .webm) that plays muted on a loop.
layout"corners" | "orbit" | "sides""corners"corners holds up to four, orbit and sides up to eight. Items past the limit are not drawn.
background"dots" | "grid" | "none""dots"The plate behind the diagram.
routes"solid" | "dashed""solid"Route stroke.
pulse"inward" | "outward" | "none""inward"Which way the pulse travels along each active route.
size"sm" | "default" | "lg""default"Scales the tiles and the hub.
halobooleantrueA slow ring breathing out from the hub.
labelstring"Integrations"Accessible name for the diagram.

It also takes the props of a div, except children. IntegrationPreviewMedia is { src: string; alt?: string; aspectRatio?: number | string }, with aspectRatio defaulting to "16 / 9".

Data attributes

Style parts by slot or state, for example with [&_[data-slot=integration-visual-item]]:rounded-full.

AttributeElementPresent when
data-slot="integration-visual"The rootAlways.
data-slot="integration-visual-item"Each tool tileAlways.
data-slot="integration-visual-hub"The hub, which takes focus when there's a previewAlways.
data-slot="integration-visual-hub-face"The face inside the hub that shows centerAlways.
data-slot="integration-visual-preview"The preview above the hubWhile the preview is open.
data-layoutThe rootAlways. corners, orbit or sides.
data-statusEach tool tileAlways. active, or idle for idle items.

Accessibility

  • 01The diagram is a labelled group, and each tool is a list item named by its title, with ", idle" added for idle ones. Set label to say what the diagram is.
  • 02Routes, pulses and the halo are decorative and hidden from assistive tech.
  • 03When there's a preview the hub joins the tab order, and focusing it shows the preview the same way hovering does.

References