Mohamed Uvaish

Member Card

Cards 10

Member Card previewPreview
About

A member row for a workspace: role, standing and last activity on one line. The owner is crowned and has no menu, an unaccepted invite shows how long it has waited, external access shows its expiry. Gold marks a paid seat. Part of Workspace Access: layro.vercel.app

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

Code

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

Usage.tsx

import * as React from "react";
import { MemberCard } from "@/components/ui/member-card";
/* Portraits are inlined as WebP data URIs so the demo fetches nothing. */
const PORTRAITS = {
  sarah: "data:image/webp;base64,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",
  michael: "data:image/webp;base64,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",
  emily: "data:image/webp;base64,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",
  daniel: "data:image/webp;base64,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",
  olivia: "data:image/webp;base64,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",
} as const;


/* ==========================================================================
   The Northwind roster.

   The same five people appear in every demo in this kit on purpose: a
   customer who buys two components should not meet two unrelated sets of
   strangers. Sarah owns the workspace, Michael is the paid admin who runs it
   day to day, Emily has been sent an invite she has not opened, and Daniel is
   at velalabs.com — an outside firm, so his access has an end date.

   Four rows, four standings, one of each.
   ========================================================================== */

export default function MemberCardDemo() {
  const [log, setLog] = React.useState<string | null>(null);

  React.useEffect(() => {
    if (!log) return;
    const t = setTimeout(() => setLog(null), 2400);
    return () => clearTimeout(t);
  }, [log]);

  return (
    <div className="flex w-full items-center justify-center bg-[#fafafa] p-8 dark:bg-neutral-950">
      <div className="flex w-full max-w-[440px] flex-col gap-2.5">
        <p className="px-1 pb-1 text-[11px] font-semibold tracking-[0.12em] text-neutral-400 uppercase dark:text-neutral-500">
          Northwind Studio · 4 people
        </p>

        <MemberCard
          email="[email protected]"
          name="Sarah Anderson"
          avatar={PORTRAITS.sarah}
          role="owner"
          lastActive="Joined Aug 2021"
        />
        <MemberCard
          email="[email protected]"
          name="Michael Carter"
          avatar={PORTRAITS.michael}
          role="admin"
          premium
          lastActive="Active 2 hours ago"
          onMenuSelect={(id) => setLog(id)}
        />
        <MemberCard
          email="[email protected]"
          name="Emily Thompson"
          avatar={PORTRAITS.emily}
          role="member"
          status="pending"
          invitedAgo="6 days"
          onMenuSelect={(id) => setLog(id)}
        />
        <MemberCard
          email="[email protected]"
          name="Daniel Wilson"
          avatar={PORTRAITS.daniel}
          role="viewer"
          status="external"
          accessEnds="12 Oct"
          onMenuSelect={(id) => setLog(id)}
        />

        <p className="h-4 px-1 text-[11.5px] text-neutral-400 dark:text-neutral-500">
          {log ? `→ ${log}` : ""}
        </p>
      </div>
    </div>
  );
}

Dependencies

More by Mohamed Uvaish

View all
  • Signature Pad

    Signature Pad

    431
  • Folder Card

    Folder Card

    346
  • Share Dialog

    Share Dialog

    313
  • Kanban Board

    Kanban Board

    270
  • Notification Panel

    Notification Panel

    110
  • Charts & KPI Cards

    Charts & KPI Cards

    97
  • Web Shot Button

    Web Shot Button

    49
  • Rich Text Editor

    Rich Text Editor

    49

More in Cards

View all
  • Course Design Cards

    Course Design Cards

    1.1K
  • Statistics Card 2

    Statistics Card 2

    270
  • Statistics Card 7

    Statistics Card 7

    297
  • Card

    Card

    56
  • Stats cards with links

    Stats cards with links

    86
  • Interactive Tech Stack Bento Grid with Hover Effects

    Interactive Tech Stack Bento Grid with Hover Effects

    155
  • Weather Card

    Weather Card

    56
  • The Item one

    The Item one

    3

Explore more

Part of Layro — browse the full library on 21st.dev.

Card components1780Avatar components597Team components119