Application

Empty

No teammates yet, with the same chrome and an Invite action.

Team members

Invite and manage your workspace teammates.

No teammates yet

Invite someone to share this workspace.

Installation

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

CLI

Add Team Members to your app with its source-owned dependencies.

bash

npx cronus-ui add team

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 { Button, Card, CardHeader, CardTitle, Separator } from "@cronus-ui/ui";
import { Users } from "lucide-react";

export function TeamEmptyBlock() {
  return (
    <Card className="mx-auto w-full max-w-xl gap-0 py-0 shadow-md">
      <CardHeader className="items-center px-6 py-5">
        <div className="flex flex-col gap-1">
          <CardTitle className="font-display text-lg">Team members</CardTitle>
          <p className="text-sm text-fg-secondary">Invite and manage your workspace teammates.</p>
        </div>
        <Button variant="primary" size="sm" className="col-start-2 row-span-2 self-center">
          <Users className="size-4" aria-hidden="true" />
          Invite
        </Button>
      </CardHeader>

      <Separator />

      <div className="flex flex-col items-center gap-3 px-6 py-12 text-center">
        <span className="inline-flex size-11 items-center justify-center rounded-xl bg-surface-overlay text-fg-secondary">
          <Users className="size-5" aria-hidden="true" />
        </span>
        <div className="flex flex-col gap-1">
          <p className="text-sm font-medium text-fg">No teammates yet</p>
          <p className="text-sm text-fg-secondary">Invite someone to share this workspace.</p>
        </div>
      </div>
    </Card>
  );
}