Billing Family Plan Members

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its avatar, badge, button dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing57.tsx instead.

Usage

The file also exports billing57Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Billing57, billing57Demo } from "@/components/blocks/billing/billing57";

export default function Page() {
  return <Billing57 {...billing57Demo} />;
}

Props

Types

interface FamilyMember {
  id: string;
  name: string;
  email: string;
  avatarUrl?: string;
  role: "owner" | "member";
  status: "active" | "invited";
  joinedLabel?: string;
}

Behavior notes

• Seats remaining is maxSeats minus members.length, computed on every render, there's no separate seatsRemaining prop to keep in sync.
• When seats are full, the Invite button is replaced with a plain sentence saying so, instead of a disabled button.
• The owner's row never gets a remove action; every other member does, rendered as a next/link styled as an icon button, not a real delete.
• Members without an avatarUrl fall back to initials generated from their name via the shared initialsFromName helper.
• The invited badge and the remove action are purely presentational here, wire the remove link and the invite flow to your own backend and confirmation dialog for a real integration.

Frequently asked questions