OrgConnector

Stable
WCAG 2.2 evidence
RTL

Lines that join a manager to a row of reports in an organisation chart. Purely decorative, so it is hidden from assistive technology (aria-hidden): reporting relationships must be available as text, which is what the tree structure of OrgChart provides (WCAG 1.3.1, 1.4.1). Presentational: renders in React Server Components. The drops are spaced evenly from the first to the last child, as in Figma, so the connector lines up with children laid out on an equal pitch; centre it over them. OrgChart draws its own connectors, which follow children of any width.

import { OrgConnector } from "@nexera-ui/react";

Loading example…

5
examples: 3
props: 1
live controls: 1
platform: 4
WCAG criteria: 0
blocks use it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

lineStyle

Generated code

import { OrgConnector } from "@nexera-ui/react";

<OrgConnector />

Examples 4

The same examples as Storybook, rendered live. Open Code to copy one.

Over nodes

A hand-built row: the connector joins a manager to three 240 px nodes on a 32 px gap, which is the pitch Figma draws it for.

Loading example…

app.tsx

import { OrgConnector } from "@nexera-ui/react";

export function OverNodes() {
  return (
    <div className="flex w-max flex-col items-center">
      <div className="text-body-strong text-primary border-default bg-surface w-60 rounded-lg border p-3.5">
        Sara Malik
      </div>
      <OrgConnector branches={3} />
      <div className="flex gap-8">
        {["Bilal Ahmed", "Hina Raza", "Omar Farooq"].map((name) => (
          <div
            key={name}
            className="text-body-strong text-primary border-default bg-surface w-60 rounded-lg border p-3.5"
          >
            {name}
          </div>
        ))}
      </div>
    </div>
  );
}

Dotted line

The dotted style (a secondary reporting line) is decorative: the relationship must also be written as text (WCAG 1.4.1).

Loading example…

app.tsx

import { OrgConnector } from "@nexera-ui/react";

<OrgConnector lineStyle="dotted" branches={2} />;

Right to left

Right-to-left: the connector is symmetric, and its offsets are logical, so nothing changes except the order of the children.

Loading example…

app.tsx

import { OrgConnector } from "@nexera-ui/react";

export function RightToLeft() {
  return (
    <div dir="rtl" className="flex max-w-xs flex-col gap-6">
      <OrgConnector branches={2} className="w-full" />
      <OrgConnector lineStyle="dotted" branches={3} className="w-full" />
    </div>
  );
}

Narrow width

Narrow container: className="w-full" makes the connector follow its container instead of the 272 px pitch.

Loading example…

app.tsx

import { OrgConnector } from "@nexera-ui/react";

export function NarrowWidth() {
  return (
    <div className="max-w-xs">
      <OrgConnector branches={3} className="w-full" />
    </div>
  );
}

Props 3

Press "Try it" on a card to load that prop into the playground.

lineStyleNexera

"solid" | "dotted"

Line style. solid is a reporting line; dotted (brand colour) is the Figma style for a secondary, dotted-line relationship. The style is decorative: say it in text as well (WCAG 1.4.1).

branchesNexera

number

Number of children the connector joins. One branch is a straight 48 px line; more draw a stem, a horizontal bar and one drop per child. Any whole number of 1 or more works: the width is (branches - 1) x 272 + 2 px, the Figma centre-to-centre distance of 240 px nodes with a 32 px gap.

classNameNexera

string

Extra classes, merged last so they win over the defaults (for example w-full).

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

2 direct · 2 supporting

1.1.1Non-text ContentLevel A · tested directly
1.3.1Info and RelationshipsLevel A · tested directly
1.3.2Meaningful SequenceLevel A · supporting test
1.4.11Non-text ContrastLevel AA · supporting test

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

Usage

<OrgConnector className="shadow-sm" />

Used in blocks

No block uses OrgConnector yet.

Theme studio

OrgConnector

Try every prop. Copy the code.

Examples 4

Over nodes

Dotted line

Right to left

Narrow width

Props 3

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components