1---
2title: Visually Connect Related Elements
3impact: MEDIUM
4tags: ux, connectedness, grouping, visual
5---
6 
7## Visually Connect Related Elements
8 
9Elements that are visually connected (by lines, color, or frames) are perceived as more related.
10 
11**Incorrect (steps with no visual connection):**
12 
13```tsx
14function Steps({ current }) {
15  return (
16    <div>
17      <span>Step 1</span>
18      <span>Step 2</span>
19      <span>Step 3</span>
20    </div>
21  );
22}
23```
24 
25**Correct (connected with a visual line):**
26 
27```tsx
28function Steps({ current }) {
29  return (
30    <div className={styles.steps}>
31      {steps.map((step, i) => (
32        <div key={step.id} className={styles.step} data-active={i <= current}>
33          <div className={styles.dot} />
34          {i < steps.length - 1 && <div className={styles.connector} />}
35          <span>{step.label}</span>
36        </div>
37      ))}
38    </div>
39  );
40}
41```
42 
43Reference: [Law of Uniform Connectedness](https://lawsofux.com/law-of-uniform-connectedness/)
44