Manage Devices

A component to manage active device sessions with confirmation dialogs and current device highlighting

Zezo Manage Devices Component

All Devices

Manage your active sessions

Current Device

Chrome on Windows

Mumbai, Maharashtra, India

Safari on iPhone

New York, NY, USA

Firefox on Linux

Unknown Location

📦 Installation

pnpm dlx shadcn@latest add https://zezo-ui.vercel.app/r/zezo-manage-devices.json

💡 Usage Example

import ManageDevices, { IWhoamiSession } from "@/components/zezo/ManageDevices/ManageDevices";

const sessions: IWhoamiSession[] = [
  {
    id: "1",
    token: "abc123",
    deviceInfo: {
      name: "Chrome on Windows",
      location: {
        city: "Mumbai",
        state: "Maharashtra",
        country: "India"
      }
    }
  }
];

<ManageDevices
  sessions={sessions}
  currentSessionToken="abc123"
  onRemoveSession={(sessionId) => {
    console.log("Remove session:", sessionId);
    // Handle session removal
  }}
/>

📘 Props

Prop	Type	Required	Description
sessions	`IWhoamiSession[]`	Yes	Array of active device session objects
currentSessionToken	`string`	Yes	Token of the current active device (highlights this device)
onRemoveSession	`(sessionId: string) => void`	Yes	Callback function called when user confirms to remove a session

🧩 IWhoamiSession Interface

export interface IWhoamiSession {
  id: string;                    // Required: Unique session identifier
  token: string;                 // Required: Session token for comparison
  deviceInfo?: {                 // Optional: Device information
    name?: string | null;         // Optional: Device name (e.g., "Chrome on Windows")
    location?: {                  // Optional: Device location
      city?: string;              // Optional: City name
      state?: string;              // Optional: State/Province
      country?: string;           // Optional: Country name
    } | null;
  };
}

✨ Features

📱 Device List

Displays all active device sessions

📍 Location Display

Shows device location (city, state, country) when available

✨ Current Device Highlight

Automatically highlights the current active device

🗑️ Remove Session

Remove button with confirmation dialog for each device

🛡️ Confirmation Dialog

Built-in confirmation before removing a session

🌓 Dark Mode

Automatic theme support

📱 Responsive

Mobile-first responsive design

🔄 Graceful Fallback

Handles missing device info and location gracefully