Active Sessions List

Display and manage active login sessions with device info, location, and revoke functionality. Includes "Revoke all other sessions" action.

Preview

States

Loading

Empty

Features

Card layout with device icons (Monitor, Smartphone, Tablet)
Device name + browser displayed prominently
"Current" badge for the active session (green)
Location + IP address on second line
Relative time for "Last active" (Just now, 2h ago, etc.)
Sign-in date displayed
Revoke individual sessions via dropdown menu
"Revoke all other sessions" button in header
Loading skeleton state
Empty state message

Install Summary

This kit will add the following files and dependencies to your project. Download the bundle and extract it into your project root.

Component Files

File	Path
active-sessions-list.tsx	components/user-management/active-sessions/active-sessions-list.tsx
session-card.tsx	components/user-management/active-sessions/session-card.tsx
types.ts	components/user-management/active-sessions/types.ts
index.ts	components/user-management/active-sessions/index.ts

Utility Files

File	Path
format.ts	lib/format.ts
design-tokens.ts	lib/design-tokens.ts

Dependencies

Install these dependencies before using the component:

Terminal

bash

npx shadcn@latest add button badge

Terminal

bash

npm install @phosphor-icons/react

Installation

Download the complete bundle as a ZIP file, or copy the text bundle to your clipboard:

Component Files

The component consists of the following files:

1. active-sessions-list.tsx

active-sessions-list.tsx

tsx

"use client";

import { useState } from "react";
import { Desktop as Monitor, ShieldWarning as ShieldAlert } from "@phosphor-icons/react";
import { Button } from "@/components/ui/button";

2. session-card.tsx

session-card.tsx

tsx

"use client";

import { useState } from "react";
import {
  Desktop as Monitor,

3. types.ts

types.ts

tsx

export type DeviceType = "desktop" | "mobile" | "tablet" | "unknown";
export type BrowserType = "chrome" | "firefox" | "safari" | "edge" | "other";

export interface Session {
  id: string;

4. index.ts

index.ts

tsx

export { ActiveSessionsList } from "./active-sessions-list";
export { SessionCard } from "./session-card";
export type {
  Session,
  DeviceType,
  BrowserType,
  ActiveSessionsListProps,
  SessionCardProps,
} from "./types";

Shared Utilities

This component uses shared utility functions. These are included in the bundle above:

format.ts

tsx

export function formatDate(date: Date): string {
  return date.toLocaleDateString("en-US", {
    month: "short",
    day: "numeric",
    year: "numeric",
  });
}

export function formatRelativeTime(date: Date, now: Date = new Date()): string {
  const diff = now.getTime() - date.getTime();
  const minutes = Math.floor(diff / 60000);

  if (minutes < 1) return "Just now";
  if (minutes < 60) return `${minutes}m ago`;

  const hours = Math.floor(minutes / 60);
  if (hours < 24) return `${hours}h ago`;

  const days = Math.floor(hours / 24);
  if (days < 7) return `${days}d ago`;

  return formatDate(date);
}

export function formatPrice(amount: number, currency = "USD"): string {
  return new Intl.NumberFormat("en-US", {
    style: "currency",
    currency,
    minimumFractionDigits: 0,
    maximumFractionDigits: 2,
  }).format(amount);
}

export function formatNumber(num: number): string {
  if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(1)}M`;
  if (num >= 1_000) return `${(num / 1_000).toFixed(1)}K`;
  return num.toString();
}

design-tokens.ts

tsx

// Border radius
export const radius = {
  card: "rounded-xl",
  badge: "rounded-full",
  button: "rounded-lg",

Usage

app/security.tsx

tsx

"use client";

import { useState } from "react";
import { ActiveSessionsList, type Session } from "@/components/user-management";

Props

Prop	Type	Default
sessions	Session[]	required
onRevokeSession	(sessionId: string) => Promise<void>	-
onRevokeAllOther	() => Promise<void>	-
isLoading	boolean	false
className	string	-