Session List

Component

About

A list of active login sessions showing device, location and last-active time, with a revoke button to end any session other than the current one.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Session List to your project and fits it to your theme.

Code

How Session List is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { SessionList, type Session } from "@/components/ui/session-list";

const sessions: Session[] = [
  {
    id: "1",
    device: "Chrome · macOS",
    location: "San Francisco, US",
    lastActive: "just now",
    current: true,
    icon: "desktop",
  },
  {
    id: "2",
    device: "Safari · iPhone 15",
    location: "San Francisco, US",
    lastActive: "2 hours ago",
    icon: "mobile",
  },
  {
    id: "3",
    device: "Firefox · Windows",
    location: "Berlin, DE",
    lastActive: "yesterday",
    icon: "desktop",
  },
  {
    id: "4",
    device: "Chrome · iPad Air",
    location: "Austin, US",
    lastActive: "3 days ago",
    icon: "tablet",
  },
];

export default function SessionListDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-8 text-foreground">
      <SessionList
        sessions={sessions}
        onRevoke={(id) => console.log("revoked", id)}
      />
    </div>
  );
}