Account

Empty

The same sessions chrome with no devices signed in.

Active sessions

Devices currently signed in to your account.

0 devices

No sessions yet.

Signed-in devices will show up here.

Revoking a session signs that device out immediately.

Installation

Install with the CLI, or add the packages and paste the source below.

CLI

Add Sessions to your app with its source-owned dependencies.

bash

npx cronus-ui add sessions

Manual

Install the Cronus UI packages, then paste the block below.

pnpm add @cronus-ui/ui @cronus-ui/tokens @cronus-ui/theme

Usage

Copy the source for Empty. Every class is a semantic token, so it re-themes with your app.

tsx

import {
  Badge,
  Button,
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
  Separator,
} from "@cronus-ui/ui";
import { LogOut } from "lucide-react";

export function SessionsEmptyBlock() {
  return (
    <Card className="mx-auto w-full max-w-2xl gap-0 pb-0 shadow-md">
      <CardHeader>
        <CardTitle className="font-display text-lg">Active sessions</CardTitle>
        <CardDescription>Devices currently signed in to your account.</CardDescription>
        <CardAction>
          <Badge variant="secondary">0 devices</Badge>
        </CardAction>
      </CardHeader>
      <CardContent className="flex flex-col items-center justify-center gap-2 py-12 text-center">
        <p className="text-sm font-medium text-fg">No sessions yet.</p>
        <p className="text-sm text-fg-secondary">Signed-in devices will show up here.</p>
      </CardContent>
      <Separator />
      <CardFooter className="justify-between gap-3 py-5">
        <span className="text-xs text-fg-tertiary">
          Revoking a session signs that device out immediately.
        </span>
        <Button variant="outline" size="sm">
          <LogOut className="size-3.5" aria-hidden="true" />
          Sign out all other sessions
        </Button>
      </CardFooter>
    </Card>
  );
}