Connections Widget

Social-style connections list with avatars, status indicators, mutual counts, and custom actions.

Followers Snapshot

Showcase a curated set of followers with online presence, mutual connections, and a CTA slot.

Realtime presence

Followers

4 followers

Ava Johnson

@ava.designs

12 mutual connections

Mateo García

@mateo.codes

6 mutual connections

Priya Patel

@priya.product

18 mutual connections

Noah Williams

@noah.analytics

3 mutual connections

Tips

Use type=followers for inbound requests and max_display to limit avatar density.
Mixing online and offline states keeps the panel lively. The component applies the status badge automatically.
Slot an :action button to funnel users into dedicated follower dialogs or modals.


        <.connections_widget connections={@followers} current_user={@user_id} type={:followers} max_display={4}>
          <:action>
            <button class="rounded-lg border border-blue-200 px-4 py-2 text-sm">View All</button>
          </:action>
        </.connections_widget>

People You May Know

Highlight mutual connections and quick actions to send invites or dismiss suggestions.

Smart Suggestions

Connections

5 connections

Aya Tanaka

@aya.motion

22 mutual connections

Lucas Mendes

@lucas.ai

15 mutual connections

Zara Mehta

@zaramehta

9 mutual connections

Jonah Fields

@jonah.ops

4 mutual connections

Riley Chen

@riley.ux

7 mutual connections

Suggestion logic

Use the same component to showcase recommended experts or collaborators. Populate mutual_count to boost social proof, and flip is_connected to update button copy automatically.

Online suggestions surface with a rich avatar ring.

Pending invites disable the CTA so states stay consistent.


        <.connections_widget connections={@suggestions} current_user={@user_id} type={:connections} max_display={5}>
          <:action>
            <button class="rounded-lg border border-emerald-200 px-4 py-2 text-sm">Refresh Suggestions</button>
          </:action>
        </.connections_widget>

Team Roster

Switch the widget to a :following context to spotlight internal teammates or cohort members.

Team Ops

Following

6 following

Lena Park

@lena.ops

32 mutual connections

Quinn Harper

@quinn.research

21 mutual connections

Jude Ortega

@jude.platform

17 mutual connections

Mila Novak

@mila.brand

11 mutual connections

Theo Laurent

@theo.finance

8 mutual connections

Sasha Okafor

@sasha.people

20 mutual connections


        <.connections_widget connections={@team} current_user={@user_id} type={:following} max_display={6}>
  <:action>
            <button class="rounded-lg border border-purple-200 px-4 py-2 text-sm">Manage Roles</button>
  </:action>
</.connections_widget>

Props

Drive the widget with a simple list of maps. Each map supports :name, :username, :mutual_count, :online, and more.

Prop	Type	Default	Description
connections	list	[]	List of connection maps (name, avatar, mutual_count, etc.)
current_user	integer	nil	Current user's id, used to highlight owned connections.
type	:followers \| :following \| :connections	:followers	Changes the copy and CTA defaults per use case.
max_display	integer	5	Control how many avatars render before truncation.
size	:sm \| :md \| :lg	:md	Adjust the avatar dimensions to match your layout density.