Home
Previous componentNext component

Integration visual

Open in fibo's StorybookOpen in FigmaOpen on 21st.dev

A diagram of a hub and the tools wired into it, for the top of a card or a feature section. Live routes pulse, idle ones dim, and the hub can open a preview on hover.

  • Database
  • Repository
  • Chat
  • Calendar
Integration visualFour tools in the corners, pulsing in. Hover or focus the snail for the last sync.

Examples

Layouts

Pick the layout by how many tools there are and which way data flows.

  • Database
  • Repository
  • Chat
  • Calendar
CornersUp to four tools, each route turning once on its way to the hub.
  • Database
  • Repository
  • Chat
  • Calendar
  • Email
  • Storage
OrbitUp to eight tools, evenly spaced on an ellipse with straight spokes.
  • Webhook
  • Database
  • Repository
  • Chat
  • Email
SidesA pipeline: inputs on the left, outputs on the right, pulses running through.
  • Database
  • Email
Two toolsSides holds a pair on one line, where corners would look half empty.

Idle tools

A tool that isn't connected yet keeps its tile and route, dimmed, with no pulse. The diagram then shows what's possible as well as what's live.

  • Database
  • Repository, idle
  • Chat
  • Calendar, idle
Idle toolsRepository and Calendar are idle.

Motion

Pulses run along live routes, into the hub by default. The halo is a slow ring breathing out from the hub. Either can be turned off, both rest while the diagram is off screen, even when you pass your own ref, and both stop for people who ask for reduced motion.

  • Database
  • Repository
  • Chat
  • Calendar
Pulse inwardSources feeding the hub. The default.
  • Database
  • Repository
  • Chat
  • Calendar
Pulse outwardThe hub sending to each tool.
  • Database
  • Repository
  • Chat
  • Calendar
No pulseRoutes stay drawn and the halo keeps breathing.
  • Database
  • Repository
  • Chat
  • Calendar
No haloA still hub, for pages that already have a lot moving.

Hub

The hub shows the snail unless you give it your own mark or a short piece of text, and the face widens to fit text.

  • Database
  • Repository
  • Chat
  • Calendar
Your markAn icon sits in a square face.
  • Database
  • Repository
  • Chat
  • Calendar
12
A countText is set bold and the face widens to fit.

A preview springs up above the hub while it's hovered or focused. It can hold anything, such as a short list of what synced last.

  • Database
  • Repository
  • Chat
  • Calendar
Preview openHeld open here, as if the pointer were resting on the hub.

Or it can be an image, an animated image, or a video that plays muted on a loop, at 16:9 unless you set another ratio.

  • Database
  • Repository
  • Chat
  • Calendar
Media previewHover or focus the snail.

Plate and routes

The plate behind the diagram is dots, a grid or nothing, and it fades out at the top and bottom.

  • Database
  • Repository
  • Chat
  • Calendar
dots
  • Database
  • Repository
  • Chat
  • Calendar
grid
  • Database
  • Repository
  • Chat
  • Calendar
none
PlatesDots, grid and none.

Routes are a solid hairline, or dashed for a lighter touch.

  • Database
  • Repository
  • Chat
  • Calendar
Solid routesThe default.
  • Database
  • Repository
  • Chat
  • Calendar
Dashed routesA lighter line, for a diagram of what could be connected.

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 feedRoutes pulse while a source is active, and dim while it waits to connect.
Twelve sources, four of them shown.

A pipeline card

The sides layout, running through the hub, for a feature that turns one kind of thing into another.

  • Webhook
  • Database
  • Repository
  • Chat
  • Email
Events in, alerts outWebhooks, commits and new rows become messages in the places your team already reads.
Events in on the left, alerts out on the right.

Anatomy

A plate of dots, a hub in the middle, and a tile for each tool, joined to the hub by a route. Pulses travel along live routes, and a halo breathes out from the hub.

  • Database
  • Repository
  • Chat
  • Calendar
  1. Tile
  2. Hub
  3. Route
  4. Halo
  5. Plate
  6. Pulse
The diagramFour tools in the corners, all live.

Guidelines

  • 01Choose the layout by count: corners for up to four tools, orbit for five to eight, and sides when data flows in one side and out the other.
  • 02Show tools that aren't connected yet as idle rather than leaving them out.
  • 03Match the pulse to the story: inward for sources feeding the hub, outward for the hub sending to them, through for a pipeline.
  • 04Name the hub with the product's mark, a count or a single word.
  • 05Put it at the top of a card and let the card's text make the claim.

Best practices

  • Database
  • Repository
  • Chat, idle
  • Calendar, idle
DoKeep tools that aren't connected yet, marked idle, so only the live routes pulse.
  • Database
  • Repository
Don'tDon't leave the corners half empty. Two tools read as unfinished; use sides for a pair.
  • Database
  • Repository
  • Chat
  • Calendar
12
DoName the hub with a mark, a number or one word.
  • Database
  • Repository
  • Chat
  • Calendar
All your integrations
Don'tDon't put a phrase in the hub. It stretches over the routes; say it in the card instead.
  • Webhook
  • Database
  • Repository
  • Chat
  • Email
DoRun a pipeline's pulses through the hub, so outputs look like outputs.
  • Webhook
  • Database
  • Repository
  • Chat
  • Email
Don'tDon't pulse every route inward in a pipeline. The outputs start to look like sources.

Accessibility

It's a picture, so it's named rather than operated. The only stop for the keyboard is the hub, and only when it has a preview.

  • 01A screen reader hears one named group, Integrations unless you name it for what it shows, then each tool by its name, with idle added for idle ones.
  • 02The plate, routes, pulses and halo are decoration and are hidden from assistive technology.
  • 03With a preview, the hub is a button named after the text in the hub, or the diagram's name. Focusing it opens the preview the same way hovering does, the preview describes it, and Escape closes it.
  • 04For people who ask for reduced motion, the pulses and halo stop, tiles appear without springing in, the preview fades in place, and a preview video waits on its first frame, or pauses if reduced motion is turned on while it plays.
  • 05If the diagram only decorates a card whose text says the same thing, a screen reader still reads the tool names. Give it a name that adds to the card rather than repeats it.

References