ExperimentalmoleculeData display

NetworkGraph

You in the middle, the people you know around you, a line to each.

import { … } from "@brdgapp/ui/components/network-graph"

Usage

NetworkGraph is the picture of a network: you (or someone) in the middle, the people you know around you, and a line to each. Up to six sit close and up to ten more sit further out, hanging off whoever they know. A blue line marks a path, like an intro that's been found. The usual mistake is treating it as a tool: it's a picture, and exploring a network belongs in a list or table.

When to use

Onboarding and sync: showing a network filling in once contacts are connected.
A directory or network page's header, as a picture of who's in it.
Marketing and promo cards, with the sample people.

When not to use

To browse, search or act on people. Use a list or a table. Use DataTable instead.
For a few faces in a small space. Use Avatar instead.
As an empty state. Use Illustration instead.

The look comes from props

A component's appearance comes only from its own options (variant, size, color). className on a package component is for layout (mt-4, shrink-0, w-full), never for font size, color, padding, radius or hover. If the look needs a className, the component or the chosen option is wrong: fix that instead.

Anatomy

Middle. “You” on a blue circle, or a person's Avatar.
Close ring. Up to 6 people, each with a dashed line to the middle.
Outer ring. Up to 10 more, smaller, each with a line to the close-in person nearest them.
Path. Highlighted people: a solid blue line and a blue ring round their face.

Examples

Your network

Six close, the rest further out. The blue line is a path: someone who can introduce you.

After a sync

Small, above the words that say what happened. Hidden from screen readers, since the title says it.

Your calendar is connected

We found 9 people you've met. Their intros are ready.

Someone else's network

Pass `center` to put a person in the middle.

States

State	What happens
Coming in	With `animate` (the default), lines and faces appear one after another once, about 60ms apart.
Still	After that, nothing moves. Under reduced motion it starts still.

Behavior

200, 280 or 360px wide (sm, md, lg), square, and narrower on a small screen.
People after the sixteenth aren't drawn.
Photos come from src; without one, the person's initials.

Do and don't

Use real names and photos when it's the person's own network.

Don't

Put real people in marketing pictures. Use the sample network.

Highlight one or two people: the path that matters.

Don't

Highlight everyone; then nothing stands out.

Content

If you label it, say what it shows: “You and 12 people you know”.

Accessibility

Hidden from screen readers unless you give it a label, because the words beside it usually say it.
With label, it's one image with that name; the faces inside aren't read one by one.

API reference